[
  {
    "path": ".github/workflows/tests.yml",
    "content": "name: Build and Test\n\non:\n  push:\n    branches: [main]\n  pull_request:\n    branches: [main]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Checkout repo\n        uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n\n      - uses: pnpm/action-setup@v4\n\n      - name: Setup Node.js environment\n        uses: actions/setup-node@v4\n        with:\n          node-version: 22\n          cache: pnpm\n\n      - name: Install dependencies\n        run: pnpm install --no-frozen-lockfile\n\n      - name: Build\n        run: pnpm run build\n        env:\n          CI: true\n\n      - name: Test\n        run: pnpm run test\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules/\ndist/\nlib/\ncoverage/\ntypes/\n*.tsbuildinfo\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"trailingComma\": \"all\",\n  \"tabWidth\": 2,\n  \"printWidth\": 100,\n  \"semi\": true,\n  \"singleQuote\": false,\n  \"useTabs\": false,\n  \"arrowParens\": \"avoid\",\n  \"bracketSpacing\": true,\n  \"endOfLine\": \"lf\",\n  \"plugins\": []\n}\n"
  },
  {
    "path": ".vscode/extensions.json",
    "content": "{\n  \"recommendations\": [\n    \"esbenp.prettier-vscode\",\n    \"astro-build.astro-vscode\",\n    \"bradlc.vscode-tailwindcss\"\n  ]\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"cSpell.words\": [\"astrojs\", \"outin\"],\n  \"css.validate\": false\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020-2021 Ryan Carniato\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "<p>\n  <img width=\"100%\" src=\"https://assets.solidjs.com/banner?project=Transition%20Group&type=core\" alt=\"Solid Transition Group\">\n</p>\n\n# Solid Transition Group\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)\n[![version](https://img.shields.io/npm/v/solid-transition-group?style=for-the-badge)](https://www.npmjs.com/package/solid-transition-group)\n[![downloads](https://img.shields.io/npm/dw/solid-transition-group?color=blue&style=for-the-badge)](https://www.npmjs.com/package/solid-transition-group)\n\nComponents for applying animations when children elements enter or leave the DOM. Influenced by React Transition Group and Vue Transitions for the SolidJS library.\n\n## Installation\n\n```bash\nnpm install solid-transition-group\n# or\nyarn add solid-transition-group\n# or\npnpm add solid-transition-group\n```\n\n## Transition\n\n`<Transition>` serve as transition effects for single element/component. The `<Transition>` only applies the transition behavior to the wrapped content inside; it doesn't render an extra DOM element, or show up in the inspected component hierarchy.\n\nAll props besides `children` are optional.\n\n### Using with CSS\n\nUsage with CSS is straightforward. Just add the `name` prop and the CSS classes will be automatically generated for you. The `name` prop is used as a prefix for the generated CSS classes. For example, if you use `name=\"slide-fade\"`, the generated CSS classes will be `.slide-fade-enter`, `.slide-fade-enter-active`, etc.\n\nThe exitting element will be removed from the DOM when the first transition ends. You can override this behavior by providing a `done` callback to the `onExit` prop.\n\n```tsx\nimport { Transition } from \"solid-transition-group\"\n\nconst [isVisible, setVisible] = createSignal(true)\n\n<Transition name=\"slide-fade\">\n  <Show when={isVisible()}>\n    <div>Hello</div>\n  </Show>\n</Transition>\n\nsetVisible(false) // triggers exit transition\n```\n\nExample CSS transition:\n\n```css\n.slide-fade-enter-active,\n.slide-fade-exit-active {\n  transition: opacity 0.3s, transform 0.3s;\n}\n.slide-fade-enter,\n.slide-fade-exit-to {\n  transform: translateX(10px);\n  opacity: 0;\n}\n.slide-fade-enter {\n  transform: translateX(-10px);\n}\n```\n\nProps for customizing the CSS classes applied by `<Transition>`:\n\n| Name               | Description                                                                                                                                                     |\n| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `name`             | Used to automatically generate transition CSS class names. e.g. `name: 'fade'` will auto expand to `.fade-enter`, `.fade-enter-active`, etc. Defaults to `\"s\"`. |\n| `enterClass`       | CSS class applied to the entering element at the start of the enter transition, and removed the frame after. Defaults to `\"s-enter\"`.                           |\n| `enterToClass`     | CSS class applied to the entering element after the enter transition starts. Defaults to `\"s-enter-to\"`.                                                        |\n| `enterActiveClass` | CSS class applied to the entering element for the entire duration of the enter transition. Defaults to `\"s-enter-active\"`.                                      |\n| `exitClass`        | CSS class applied to the exiting element at the start of the exit transition, and removed the frame after. Defaults to `\"s-exit\"`.                              |\n| `exitToClass`      | CSS class applied to the exiting element after the exit transition starts. Defaults to `\"s-exit-to\"`.                                                           |\n| `exitActiveClass`  | CSS class applied to the exiting element for the entire duration of the exit transition. Defaults to `\"s-exit-active\"`.                                         |\n\n### Using with JavaScript\n\nYou can also use JavaScript to animate the transition. The `<Transition>` component provides several events that you can use to hook into the transition lifecycle. The `onEnter` and `onExit` events are called when the transition starts, and the `onBeforeEnter` and `onBeforeExit` events are called before the transition starts. The `onAfterEnter` and `onAfterExit` events are called after the transition ends.\n\n```jsx\n<Transition\n  onEnter={(el, done) => {\n    const a = el.animate([{ opacity: 0 }, { opacity: 1 }], {\n      duration: 600\n    });\n    a.finished.then(done);\n  }}\n  onExit={(el, done) => {\n    const a = el.animate([{ opacity: 1 }, { opacity: 0 }], {\n      duration: 600\n    });\n    a.finished.then(done);\n  }}\n>\n  {show() && <div>Hello</div>}\n</Transition>\n```\n\n**Events** proved by `<Transition>` for animating elements with JavaScript:\n\n| Name            | Parameters                           | Description                                                                                                                                                                                                                                                                                                                                                                           |\n| --------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `onBeforeEnter` | `element: Element`                   | Function called before the enter transition starts. The `element` is not yet rendered.                                                                                                                                                                                                                                                                                                |\n| `onEnter`       | `element: Element, done: () => void` | Function called when the enter transition starts. The `element` is rendered to the DOM. Call `done` to end the transition - removes the enter classes, and calls `onAfterEnter`. If the parameter for `done` is not provided, it will be called on `transitionend` or `animationend`.                                                                                                 |\n| `onAfterEnter`  | `element: Element`                   | Function called after the enter transition ends. The `element` is removed from the DOM.                                                                                                                                                                                                                                                                                               |\n| `onBeforeExit`  | `element: Element`                   | Function called before the exit transition starts. The `element` is still rendered, exit classes are not yet applied.                                                                                                                                                                                                                                                                 |\n| `onExit`        | `element: Element, done: () => void` | Function called when the exit transition starts, after the exit classes are applied (`enterToClass` and `exitActiveClass`). The `element` is still rendered. Call `done` to end the transition - removes exit classes, calls `onAfterExit` and removes the element from the DOM. If the parameter for `done` is not provided, it will be called on `transitionend` or `animationend`. |\n| `onAfterExit`   | `element: Element`                   | Function called after the exit transition ends. The `element` is removed from the DOM.                                                                                                                                                                                                                                                                                                |\n\n### Changing Transition Mode\n\nBy default, `<Transition>` will apply the transition effect to both entering and exiting elements simultaneously. You can change this behavior by setting the `mode` prop to `\"outin\"` or `\"inout\"`. The `\"outin\"` mode will wait for the exiting element to finish before applying the transition to the entering element. The `\"inout\"` mode will wait for the entering element to finish before applying the transition to the exiting element.\n\nBy default the transition won't be applied on initial render. You can change this behavior by setting the `appear` prop to `true`.\n\n> **Warning:** When using `appear` with SSR, the initial transition will be applied on the client-side, which might cause a flash of unstyled content.\n> You need to handle applying the initial transition on the server-side yourself.\n\n## TransitionGroup\n\n### Props\n\n- `moveClass` - CSS class applied to the moving elements for the entire duration of the move transition. Defaults to `\"s-move\"`.\n- exposes the same props as `<Transition>` except `mode`.\n\n### Usage\n\n`<TransitionGroup>` serve as transition effects for multiple elements/components.\n\n`<TransitionGroup>` supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the name attribute or configured with the move-class attribute). If the CSS transform property is \"transition-able\" when the moving class is applied, the element will be smoothly animated to its destination using the FLIP technique.\n\n```jsx\n<ul>\n  <TransitionGroup name=\"slide\">\n    <For each={state.items}>{item => <li>{item.text}</li>}</For>\n  </TransitionGroup>\n</ul>\n```\n\n## Demo\n\nKitchen sink demo: https://solid-transition-group.netlify.app/\n\nSource code: https://github.com/solidjs-community/solid-transition-group/blob/main/dev/kitchen-sink.tsx\n\n## FAQ\n\n- **How to use with Portal?** - [Issue #8](https://github.com/solidjs-community/solid-transition-group/issues/8)\n- **How to use with Outlet?** - [Issue #29](https://github.com/solidjs-community/solid-transition-group/issues/29)\n- **Why elements are not connected in outin mode** - [Issue #34](https://github.com/solidjs-community/solid-transition-group/issues/34)\n"
  },
  {
    "path": "astro.config.ts",
    "content": "import path from \"path\";\nimport { fileURLToPath } from \"url\";\nimport { defineConfig } from \"astro/config\";\nimport solid from \"@astrojs/solid-js\";\nimport tailwind from \"@astrojs/tailwind\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\n// https://astro.build/config\nexport default defineConfig({\n  outDir: \"dev/dist\",\n  srcDir: \"dev\",\n  vite: {\n    resolve: {\n      alias: {\n        \"solid-transition-group\": path.resolve(__dirname, \"./src/index.ts\"),\n      },\n    },\n  },\n  integrations: [solid(), tailwind()],\n});\n"
  },
  {
    "path": "dev/env.d.ts",
    "content": "/// <reference types=\"astro/client\" />\n"
  },
  {
    "path": "dev/group.tsx",
    "content": "import { Component, For, createSignal } from \"solid-js\";\nimport { TransitionGroup } from \"solid-transition-group\";\n\nfunction shuffle<T>(array: T[]): T[] {\n  return array.sort(() => Math.random() - 0.5);\n}\n\nconst getRandomChar = () => ({ v: String.fromCharCode(65 + Math.floor(Math.random() * 26)) });\n\nconst Group: Component = () => {\n  const [list, setList] = createSignal<{ v: string }[]>([\n    { v: \"S\" },\n    { v: \"O\" },\n    { v: \"L\" },\n    { v: \"I\" },\n    { v: \"D\" },\n    { v: \"-\" },\n    { v: \"T\" },\n    { v: \"R\" },\n    { v: \"A\" },\n    { v: \"N\" },\n    { v: \"S\" },\n    { v: \"I\" },\n    { v: \"T\" },\n    { v: \"I\" },\n    { v: \"O\" },\n    { v: \"N\" },\n    { v: \"-\" },\n    { v: \"G\" },\n    { v: \"R\" },\n    { v: \"O\" },\n    { v: \"U\" },\n    { v: \"P\" },\n  ]);\n  const randomIndex = () => Math.floor(Math.random() * list().length);\n\n  return (\n    <>\n      <div class=\"flex gap-1\">\n        <button onClick={() => setList(p => shuffle([...p]))}>Shuffle</button>\n        <button\n          onClick={() => {\n            const rand = randomIndex();\n            setList(p => [...p.slice(0, rand), ...p.slice(rand + 2)]);\n          }}\n        >\n          Remove\n        </button>\n        <button\n          onClick={() => {\n            const rand = randomIndex();\n            setList(p => [\n              ...p.slice(0, rand),\n              getRandomChar(),\n              getRandomChar(),\n              getRandomChar(),\n              ...p.slice(rand),\n            ]);\n          }}\n        >\n          Add\n        </button>\n      </div>\n      <div class=\"mt-8 flex flex-wrap gap-1\">\n        <TransitionGroup name=\"group-item\">\n          <For each={list()}>\n            {({ v }) => (\n              <div class=\"group-item flex justify-center items-center w-5 h-6 bg-slate-700 rounded-sm\">\n                <span class=\"font-mono font-semibold\">{v}</span>\n              </div>\n            )}\n          </For>\n        </TransitionGroup>\n      </div>\n    </>\n  );\n};\n\nexport default Group;\n"
  },
  {
    "path": "dev/kitchen-sink.tsx",
    "content": "import { Component, For, Show, createSignal } from \"solid-js\";\nimport { Transition, TransitionGroup } from \"solid-transition-group\";\n\nfunction shuffle<T extends any[]>(array: T): T {\n  return array.sort(() => Math.random() - 0.5);\n}\n\nconst getRandomColor = () => `#${((Math.random() * 2 ** 24) | 0).toString(16)}`;\n\nconst Group: Component = () => {\n  const [list, setList] = createSignal([1, 2, 3, 4, 5, 6, 7, 8, 9]);\n  let nextId = 10;\n  const randomIndex = () => Math.floor(Math.random() * list().length);\n\n  return (\n    <>\n      <div class=\"flex gap-x-1\">\n        <button onClick={() => setList(p => shuffle([...p]))}>Shuffle</button>\n        <button\n          onClick={() => {\n            const rand = randomIndex();\n            setList(p => [...p.slice(0, rand), ...p.slice(rand + 1)]);\n          }}\n        >\n          Remove\n        </button>\n        <button onClick={() => setList([])}>Remove All</button>\n        <button\n          onClick={() => {\n            setList(\n              shuffle(Array.from({ length: 50 }, (_, i) => i).filter(() => Math.random() > 0.5)),\n            );\n          }}\n        >\n          Randomize\n        </button>\n        <button\n          onClick={() => {\n            const rand = randomIndex();\n            setList(p => [...p.slice(0, rand), nextId++, ...p.slice(rand)]);\n          }}\n        >\n          Add\n        </button>\n      </div>\n      <div class=\"p-8 relative flex flex-wrap gap-0.5\">\n        <TransitionGroup name=\"group-item\">\n          <For each={list()} fallback={<div>fallback</div>}>\n            {() => (\n              <div class=\"group-item\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 4 4\">\n                  <rect\n                    width={2.5 - Math.random()}\n                    height={2.5 - Math.random()}\n                    transform={`translate(0.5, 0.5) rotate(${Math.random() * 360} 1.5 1)`}\n                    fill={getRandomColor()}\n                  />\n                </svg>\n              </div>\n            )}\n          </For>\n        </TransitionGroup>\n      </div>\n    </>\n  );\n};\n\nconst SwitchCSS: Component = () => {\n  const [page, setPage] = createSignal(1);\n\n  return (\n    <>\n      <button onClick={() => setPage(p => ++p)}>Next</button>\n      <br />\n      <Transition mode=\"outin\" name=\"fade\">\n        <Show when={page()} keyed>\n          {i => <div style={{ \"background-color\": getRandomColor(), padding: \"1rem\" }}>{i}.</div>}\n        </Show>\n      </Transition>\n    </>\n  );\n};\n\nconst SwitchJS: Component = () => {\n  const [page, setPage] = createSignal(1);\n\n  function onEnter(el: Element, done: VoidFunction) {\n    const a = el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500, easing: \"ease\" });\n    a.finished.then(done);\n  }\n  function onExit(el: Element, done: VoidFunction) {\n    const a = el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 500, easing: \"ease\" });\n    a.finished.then(done);\n  }\n\n  return (\n    <>\n      <button onClick={() => setPage(p => ++p)}>Next</button>\n      <br />\n      <Transition mode=\"outin\" onEnter={onEnter} onExit={onExit}>\n        <Show when={page()} keyed>\n          {i => <div style={{ \"background-color\": getRandomColor(), padding: \"1rem\" }}>{i}.</div>}\n        </Show>\n      </Transition>\n    </>\n  );\n};\n\nconst Collapse: Component = () => {\n  const [show, toggleShow] = createSignal(true);\n\n  const COLLAPSED_PROPERTIES = {\n    height: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n    borderTopWidth: 0,\n    borderBottomWidth: 0,\n  };\n\n  function getHeight(el: Element): string {\n    const rect = el.getBoundingClientRect();\n    return `${rect.height}px`;\n  }\n\n  function onEnter(el: Element, done: VoidFunction) {\n    const a = el.animate(\n      [\n        COLLAPSED_PROPERTIES,\n        {\n          height: getHeight(el),\n        },\n      ],\n      { duration: 500, easing: \"ease\" },\n    );\n\n    a.finished.then(done);\n  }\n\n  function onExit(el: Element, done: VoidFunction) {\n    const a = el.animate(\n      [\n        {\n          height: getHeight(el),\n        },\n        COLLAPSED_PROPERTIES,\n      ],\n      { duration: 500, easing: \"ease\" },\n    );\n\n    a.finished.then(done);\n  }\n\n  return (\n    <>\n      <button onClick={() => toggleShow(!show())}>{show() ? \"Hide\" : \"Show\"}</button>\n      <br />\n      <Transition mode=\"outin\" name=\"collapse\" onEnter={onEnter} onExit={onExit}>\n        <Show when={show()}>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero,\n            at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.\n          </p>\n        </Show>\n      </Transition>\n    </>\n  );\n};\n\nconst Example = () => {\n  const [show, toggleShow] = createSignal(true);\n\n  return (\n    <>\n      <button onClick={() => toggleShow(!show())}>{show() ? \"Hide\" : \"Show\"}</button>\n      <br />\n      <br />\n      <b>Transition:</b>\n      <Transition name=\"slide-fade\">\n        {show() && (\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero,\n            at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.\n          </div>\n        )}\n      </Transition>\n      <br />\n      <b>Animation:</b>\n      <Transition name=\"bounce\">\n        {show() && (\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero,\n            at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.\n          </div>\n        )}\n      </Transition>\n      <br />\n      <b>Custom JS:</b>\n      <Transition\n        onEnter={(el, done) => {\n          const a = el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 600 });\n          a.finished.then(done);\n        }}\n        onExit={(el, done) => {\n          const a = el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 600 });\n          a.finished.then(done);\n        }}\n      >\n        {show() && (\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero,\n            at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.\n          </div>\n        )}\n      </Transition>\n      <br />\n\n      <b>Switch OutIn CSS</b>\n      <br />\n      <SwitchCSS />\n      <br />\n\n      <b>Switch OutIn JS</b>\n      <br />\n      <SwitchJS />\n      <br />\n\n      <b>Collapse OutIn CSS & JS</b>\n      <br />\n      <Collapse />\n      <br />\n\n      <b>Group</b>\n      <br />\n      <Group />\n    </>\n  );\n};\n\nexport default Example;\n"
  },
  {
    "path": "dev/layout.astro",
    "content": "---\ninterface Props {\n  title: string;\n}\nconst { title } = Astro.props;\n\nimport \"./styles.css\";\n---\n\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width\" />\n  </head>\n  <body>\n    <nav>\n      <ul class=\"flex flex-col p-3 gap-y-1\">\n        <li><a class=\"text-blue-500\" href=\"/\">Kitchen Sink</a></li>\n        <li><a class=\"text-blue-500\" href=\"/group\">TransitionGroup</a></li>\n      </ul>\n    </nav>\n    <main>\n      <h1 class=\"mb-6\">{title}</h1>\n      <slot />\n    </main>\n  </body>\n</html>\n"
  },
  {
    "path": "dev/pages/group.astro",
    "content": "---\nimport Layout from \"../layout.astro\";\nimport Exmaple from \"../group\";\n---\n\n<Layout title=\"<TransitionGroup>\">\n  <Exmaple client:idle />\n</Layout>\n"
  },
  {
    "path": "dev/pages/index.astro",
    "content": "---\nimport Layout from \"../layout.astro\";\nimport Example from \"../kitchen-sink\";\n---\n\n<Layout title=\"Kitchen Sink\">\n  <Example client:idle />\n</Layout>\n"
  },
  {
    "path": "dev/styles.css",
    "content": "body {\n  background-color: #1e1e1e;\n  color: #fff;\n  font-family: \"Roboto\", sans-serif;\n}\nmain {\n  width: 100%;\n  max-width: 600px;\n  margin: 10vh auto;\n}\n\nh1 {\n  font-size: 2rem;\n  font-weight: 500;\n}\nh2 {\n  font-size: 1.5rem;\n  font-weight: 500;\n}\nh3 {\n  font-size: 1.25rem;\n  font-weight: 500;\n}\nh4 {\n  font-size: 1rem;\n  font-weight: 500;\n}\nh5 {\n  font-size: 0.875rem;\n  font-weight: 500;\n}\nh6 {\n  font-size: 0.75rem;\n  font-weight: 500;\n}\n\nbutton {\n  @apply bg-blue-600 text-white font-medium py-1 px-2 rounded;\n  @apply hover:bg-blue-700;\n  @apply focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50;\n  @apply transition ease-in-out;\n}\n\n.container {\n  position: relative;\n}\n\n.fade-enter-active,\n.fade-exit-active {\n  transition: opacity 0.5s;\n}\n.fade-enter,\n.fade-exit-to {\n  opacity: 0;\n}\n\n.slide-fade-enter-active {\n  transition: all 0.3s ease;\n}\n.slide-fade-exit-active {\n  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n.slide-fade-enter,\n.slide-fade-exit-to {\n  transform: translateX(10px);\n  opacity: 0;\n}\n\n.bounce-enter-active {\n  animation: bounce-in 0.5s;\n}\n.bounce-exit-active {\n  animation: bounce-in 0.5s reverse;\n}\n@keyframes bounce-in {\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1.5);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.collapse-exit-active,\n.collapse-enter-active {\n  overflow: hidden;\n}\n\n.group-item {\n  transition: all 0.5s;\n}\n\n.group-item-enter,\n.group-item-exit-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n.group-item-exit-active {\n  position: absolute;\n}\n"
  },
  {
    "path": "netlify.toml",
    "content": "[build]\n  base = \"/\"\n  publish = \"dev/dist/\"\n  command = \"pnpm run build:site\""
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"solid-transition-group\",\n  \"description\": \"Components to manage animations for SolidJS\",\n  \"author\": \"Ryan Carniato\",\n  \"license\": \"MIT\",\n  \"version\": \"0.3.0\",\n  \"homepage\": \"https://github.com/solidjs/solid-transition-group#readme\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/solidjs/solid-transition-group\"\n  },\n  \"sideEffects\": false,\n  \"private\": false,\n  \"type\": \"module\",\n  \"module\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"exports\": {\n    \"import\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"default\": \"./dist/index.js\"\n    }\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"dev\": \"astro dev\",\n    \"build:site\": \"astro build\",\n    \"build\": \"tsc -b tsconfig.build.json\",\n    \"test:client\": \"vitest\",\n    \"test:ssr\": \"pnpm run test:client --mode ssr\",\n    \"test\": \"concurrently pnpm:test:*\",\n    \"format\": \"prettier -w **/*.{js,ts,json,css,tsx,jsx} --ignore-path .gitignore\",\n    \"prepublishOnly\": \"pnpm build\"\n  },\n  \"devDependencies\": {\n    \"@astrojs/solid-js\": \"^2.2.0\",\n    \"@astrojs/tailwind\": \"^4.0.0\",\n    \"astro\": \"^2.10.1\",\n    \"concurrently\": \"^9.1.2\",\n    \"jsdom\": \"^26.0.0\",\n    \"prettier\": \"^3.4.2\",\n    \"solid-js\": \"^1.9.4\",\n    \"tailwindcss\": \"^3.3.3\",\n    \"typescript\": \"^5.7.3\",\n    \"vite-plugin-solid\": \"^2.11.0\",\n    \"vitest\": \"^2.1.8\"\n  },\n  \"dependencies\": {\n    \"@solid-primitives/refs\": \"^1.1.0\",\n    \"@solid-primitives/transition-group\": \"^1.1.0\"\n  },\n  \"peerDependencies\": {\n    \"solid-js\": \"^1.6.12\"\n  },\n  \"packageManager\": \"pnpm@9.15.0\",\n  \"engines\": {\n    \"node\": \">=20.0.0\",\n    \"pnpm\": \">=9.0.0\"\n  }\n}\n"
  },
  {
    "path": "src/index.ts",
    "content": "import { createMemo, type FlowComponent, type JSX } from \"solid-js\";\nimport { createSwitchTransition, createListTransition } from \"@solid-primitives/transition-group\";\nimport { resolveFirst, resolveElements } from \"@solid-primitives/refs\";\n\nfunction createClassnames(props: TransitionProps & TransitionGroupProps) {\n  return createMemo(() => {\n    const name = props.name || \"s\";\n    return {\n      enterActive: (props.enterActiveClass || name + \"-enter-active\").split(\" \"),\n      enter: (props.enterClass || name + \"-enter\").split(\" \"),\n      enterTo: (props.enterToClass || name + \"-enter-to\").split(\" \"),\n      exitActive: (props.exitActiveClass || name + \"-exit-active\").split(\" \"),\n      exit: (props.exitClass || name + \"-exit\").split(\" \"),\n      exitTo: (props.exitToClass || name + \"-exit-to\").split(\" \"),\n      move: (props.moveClass || name + \"-move\").split(\" \"),\n    };\n  });\n}\n\n// https://github.com/solidjs-community/solid-transition-group/issues/12\n// for the css transition be triggered properly on firefox\n// we need to wait for two frames before changeing classes\nfunction nextFrame(fn: () => void) {\n  requestAnimationFrame(() => requestAnimationFrame(fn));\n}\n\n/**\n * Run an enter transition on an element - common for both Transition and TransitionGroup\n */\nfunction enterTransition(\n  classes: ReturnType<ReturnType<typeof createClassnames>>,\n  events: TransitionEvents,\n  el: Element,\n  done?: VoidFunction,\n) {\n  const { onBeforeEnter, onEnter, onAfterEnter } = events;\n\n  // before the elements are added to the DOM\n  onBeforeEnter?.(el);\n\n  el.classList.add(...classes.enter);\n  el.classList.add(...classes.enterActive);\n\n  // after the microtask the elements will be added to the DOM\n  // and onEnter will be called in the same frame\n  queueMicrotask(() => {\n    // Don't animate element if it's not in the DOM\n    // This can happen when elements are changed under Suspense\n    if (!el.parentNode) return done?.();\n\n    onEnter?.(el, () => endTransition());\n  });\n\n  nextFrame(() => {\n    el.classList.remove(...classes.enter);\n    el.classList.add(...classes.enterTo);\n\n    if (!onEnter || onEnter.length < 2) {\n      el.addEventListener(\"transitionend\", endTransition);\n      el.addEventListener(\"animationend\", endTransition);\n    }\n  });\n\n  function endTransition(e?: Event) {\n    if (!e || e.target === el) {\n      done?.(); // starts exit transition in \"in-out\" mode\n      el.removeEventListener(\"transitionend\", endTransition);\n      el.removeEventListener(\"animationend\", endTransition);\n      el.classList.remove(...classes.enterActive);\n      el.classList.remove(...classes.enterTo);\n      onAfterEnter?.(el);\n    }\n  }\n}\n\n/**\n * @private\n *\n * Run an exit transition on an element - common for both Transition and TransitionGroup\n */\nexport function exitTransition(\n  classes: ReturnType<ReturnType<typeof createClassnames>>,\n  events: TransitionEvents,\n  el: Element,\n  done?: VoidFunction,\n) {\n  const { onBeforeExit, onExit, onAfterExit } = events;\n\n  // Don't animate element if it's not in the DOM\n  // This can happen when elements are changed under Suspense\n  if (!el.parentNode) return done?.();\n\n  onBeforeExit?.(el);\n\n  el.classList.add(...classes.exit);\n  el.classList.add(...classes.exitActive);\n\n  onExit?.(el, () => endTransition());\n\n  nextFrame(() => {\n    el.classList.remove(...classes.exit);\n    el.classList.add(...classes.exitTo);\n\n    if (!onExit || onExit.length < 2) {\n      el.addEventListener(\"transitionend\", endTransition);\n      el.addEventListener(\"animationend\", endTransition);\n    }\n  });\n\n  function endTransition(e?: Event) {\n    if (!e || e.target === el) {\n      // calling done() will remove element from the DOM,\n      // but also trigger onChange callback in <TransitionGroup>.\n      // Which is why the classes need to removed afterwards,\n      // so that removing them won't change el styles when for the move transition\n      done?.();\n      el.removeEventListener(\"transitionend\", endTransition);\n      el.removeEventListener(\"animationend\", endTransition);\n      el.classList.remove(...classes.exitActive);\n      el.classList.remove(...classes.exitTo);\n      onAfterExit?.(el);\n    }\n  }\n}\n\nexport type TransitionEvents = {\n  /**\n   * Function called before the enter transition starts.\n   * The {@link element} is not yet rendered.\n   */\n  onBeforeEnter?: (element: Element) => void;\n  /**\n   * Function called when the enter transition starts.\n   * The {@link element} is rendered to the DOM.\n   *\n   * Call {@link done} to end the transition - removes the enter classes,\n   * and calls {@link TransitionEvents.onAfterEnter}.\n   * If the parameter for {@link done} is not provided, it will be called on `transitionend` or `animationend`.\n   */\n  onEnter?: (element: Element, done: () => void) => void;\n  /**\n   * Function called after the enter transition ends.\n   * The {@link element} is removed from the DOM.\n   */\n  onAfterEnter?: (element: Element) => void;\n  /**\n   * Function called before the exit transition starts.\n   * The {@link element} is still rendered, exit classes are not yet applied.\n   */\n  onBeforeExit?: (element: Element) => void;\n  /**\n   * Function called when the exit transition starts, after the exit classes are applied\n   * ({@link TransitionProps.enterToClass} and {@link TransitionProps.exitActiveClass}).\n   * The {@link element} is still rendered.\n   *\n   * Call {@link done} to end the transition - removes exit classes,\n   * calls {@link TransitionEvents.onAfterExit} and removes the element from the DOM.\n   * If the parameter for {@link done} is not provided, it will be called on `transitionend` or `animationend`.\n   */\n  onExit?: (element: Element, done: () => void) => void;\n  /**\n   * Function called after the exit transition ends.\n   * The {@link element} is removed from the DOM.\n   */\n  onAfterExit?: (element: Element) => void;\n};\n\n/**\n * Props for the {@link Transition} component.\n */\nexport type TransitionProps = TransitionEvents & {\n  /**\n   * Used to automatically generate transition CSS class names.\n   * e.g. `name: 'fade'` will auto expand to `.fade-enter`, `.fade-enter-active`, etc.\n   * Defaults to `\"s\"`.\n   */\n  name?: string;\n  /**\n   * CSS class applied to the entering element for the entire duration of the enter transition.\n   * Defaults to `\"s-enter-active\"`.\n   */\n  enterActiveClass?: string;\n  /**\n   * CSS class applied to the entering element at the start of the enter transition, and removed the frame after.\n   * Defaults to `\"s-enter\"`.\n   */\n  enterClass?: string;\n  /**\n   * CSS class applied to the entering element after the enter transition starts.\n   * Defaults to `\"s-enter-to\"`.\n   */\n  enterToClass?: string;\n  /**\n   * CSS class applied to the exiting element for the entire duration of the exit transition.\n   * Defaults to `\"s-exit-active\"`.\n   */\n  exitActiveClass?: string;\n  /**\n   * CSS class applied to the exiting element at the start of the exit transition, and removed the frame after.\n   * Defaults to `\"s-exit\"`.\n   */\n  exitClass?: string;\n  /**\n   * CSS class applied to the exiting element after the exit transition starts.\n   * Defaults to `\"s-exit-to\"`.\n   */\n  exitToClass?: string;\n  /**\n   * Whether to apply transition on initial render. Defaults to `false`.\n   */\n  appear?: boolean;\n  /**\n   * Controls the timing sequence of leaving/entering transitions.\n   * Available modes are `\"outin\"` and `\"inout\"`;\n   * Defaults to simultaneous.\n   */\n  mode?: \"inout\" | \"outin\";\n};\n\nconst TRANSITION_MODE_MAP = {\n  inout: \"in-out\",\n  outin: \"out-in\",\n} as const;\n\n/**\n * The `<Transition>` component lets you apply enter and leave animations on element passed to `props.children`.\n *\n * It only supports transitioning a single element at a time.\n *\n * @param props {@link TransitionProps}\n */\nexport const Transition: FlowComponent<TransitionProps> = props => {\n  const classnames = createClassnames(props);\n\n  return createSwitchTransition(\n    resolveFirst(() => props.children),\n    {\n      mode: TRANSITION_MODE_MAP[props.mode!],\n      appear: props.appear,\n      onEnter(el, done) {\n        enterTransition(classnames(), props, el, done);\n      },\n      onExit(el, done) {\n        exitTransition(classnames(), props, el, done);\n      },\n    },\n  ) as unknown as JSX.Element;\n};\n\n/**\n * Props for the {@link TransitionGroup} component.\n */\nexport type TransitionGroupProps = Omit<TransitionProps, \"mode\"> & {\n  /**\n   * CSS class applied to the moving elements for the entire duration of the move transition.\n   * Defaults to `\"s-move\"`.\n   */\n  moveClass?: string;\n};\n\n/**\n * The `<TransitionGroup>` component lets you apply enter and leave animations on elements passed to `props.children`.\n *\n * It supports transitioning multiple elements at a time and moving elements around.\n *\n * @param props {@link TransitionGroupProps}\n */\nexport const TransitionGroup: FlowComponent<TransitionGroupProps> = props => {\n  const classnames = createClassnames(props);\n\n  return createListTransition(resolveElements(() => props.children).toArray, {\n    appear: props.appear,\n    exitMethod: \"keep-index\",\n    onChange({ added, removed, finishRemoved, list }) {\n      const classes = classnames();\n\n      // ENTER\n      for (const el of added) {\n        enterTransition(classes, props, el);\n      }\n\n      // MOVE\n      const toMove: { el: HTMLElement | SVGElement; rect: DOMRect }[] = [];\n      // get rects of elements before the changes to the DOM\n      for (const el of list) {\n        if (el.isConnected && (el instanceof HTMLElement || el instanceof SVGElement)) {\n          toMove.push({ el, rect: el.getBoundingClientRect() });\n        }\n      }\n\n      // wait for th new list to be rendered\n      queueMicrotask(() => {\n        const moved: (HTMLElement | SVGElement)[] = [];\n\n        for (const { el, rect } of toMove) {\n          if (el.isConnected) {\n            const newRect = el.getBoundingClientRect(),\n              dX = rect.left - newRect.left,\n              dY = rect.top - newRect.top;\n            if (dX || dY) {\n              // set els to their old position before transition\n              el.style.transform = `translate(${dX}px, ${dY}px)`;\n              el.style.transitionDuration = \"0s\";\n              moved.push(el);\n            }\n          }\n        }\n\n        document.body.offsetHeight; // force reflow\n\n        for (const el of moved) {\n          el.classList.add(...classes.move);\n\n          // clear transition - els will move to their new position\n          el.style.transform = el.style.transitionDuration = \"\";\n\n          function endTransition(e: Event) {\n            if (e.target === el || /transform$/.test((e as TransitionEvent).propertyName)) {\n              el.removeEventListener(\"transitionend\", endTransition);\n              el.classList.remove(...classes.move);\n            }\n          }\n          el.addEventListener(\"transitionend\", endTransition);\n        }\n      });\n\n      // EXIT\n      for (const el of removed) {\n        exitTransition(classes, props, el, () => finishRemoved([el]));\n      }\n    },\n  }) as unknown as JSX.Element;\n};\n"
  },
  {
    "path": "tailwind.config.cjs",
    "content": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\"./**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}\"],\n  theme: {\n    extend: {}\n  },\n  plugins: []\n};\n"
  },
  {
    "path": "test/index.test.tsx",
    "content": "// Flush animation frames manually\nconst rafQueue: VoidFunction[] = [];\n(globalThis as any).requestAnimationFrame = (cb: VoidFunction) => {\n  rafQueue.push(cb);\n};\nfunction flushRaf() {\n  const queue = rafQueue.slice();\n  rafQueue.length = 0;\n  queue.forEach(cb => cb());\n}\n\nimport { Show, createRoot, createSignal } from \"solid-js\";\nimport { describe, expect, it } from \"vitest\";\nimport { Transition, exitTransition } from \"../src/index.js\";\n\ndescribe(\"Transition\", () => {\n  it(\"matches the timing of vue out-in transition\", async () => {\n    const captured: [type: string, parentNode: boolean, classname: string][] = [];\n    let runEnter!: VoidFunction;\n    let runExit!: VoidFunction;\n\n    function onBeforeEnter(el: Element) {\n      captured.push([\"before enter\", el.parentNode !== null, el.className]);\n      requestAnimationFrame(() => {\n        captured.push([\"1 frame\", el.parentNode !== null, el.className]);\n        requestAnimationFrame(() => {\n          captured.push([\"2 frame\", el.parentNode !== null, el.className]);\n          requestAnimationFrame(() => {\n            captured.push([\"3 frame\", el.parentNode !== null, el.className]);\n          });\n        });\n      });\n    }\n    function onEnter(el: Element, done: VoidFunction) {\n      captured.push([\"enter\", el.parentNode !== null, el.className]);\n      runEnter = done;\n    }\n    function onAfterEnter(el: Element) {\n      captured.push([\"after enter\", el.parentNode !== null, el.className]);\n    }\n    function onBeforeExit(el: Element) {\n      captured.push([\"before exit\", el.parentNode !== null, el.className]);\n    }\n    function onExit(el: Element, done: VoidFunction) {\n      captured.push([\"exit\", el.parentNode !== null, el.className]);\n      runExit = done;\n    }\n    function onAfterExit(el: Element) {\n      captured.push([\"after exit\", el.parentNode !== null, el.className]);\n    }\n\n    const [page, setPage] = createSignal(1);\n\n    const dispose = createRoot(dispose => {\n      <div>\n        <Transition\n          mode=\"outin\"\n          onBeforeEnter={onBeforeEnter}\n          onEnter={onEnter}\n          onAfterEnter={onAfterEnter}\n          onBeforeExit={onBeforeExit}\n          onExit={onExit}\n          onAfterExit={onAfterExit}\n        >\n          <Show when={page()} keyed>\n            {i => <div>{i}</div>}\n          </Show>\n        </Transition>\n      </div>;\n\n      return dispose;\n    });\n\n    expect(captured).toHaveLength(0);\n\n    setPage(2);\n\n    flushRaf();\n    flushRaf();\n\n    runExit();\n\n    // enter - await microtask\n    await Promise.resolve();\n\n    flushRaf();\n    flushRaf();\n    flushRaf();\n\n    runEnter();\n\n    expect(captured).toEqual([\n      [\"before exit\", true, \"\"],\n      [\"exit\", true, \"s-exit s-exit-active\"],\n      [\"before enter\", false, \"\"],\n      [\"after exit\", false, \"\"],\n      [\"enter\", true, \"s-enter s-enter-active\"],\n      [\"1 frame\", true, \"s-enter s-enter-active\"],\n      [\"2 frame\", true, \"s-enter s-enter-active\"],\n      [\"3 frame\", true, \"s-enter-active s-enter-to\"],\n      [\"after enter\", true, \"\"],\n    ]);\n\n    dispose();\n  });\n});\n\ndescribe(\"exitTransition\", () => {\n  it(\"removes exit classes after calling done()\", () => {\n    const parent = document.createElement(\"div\");\n    const el = document.createElement(\"div\");\n    parent.appendChild(el);\n\n    let capturedClassName: string | null = null;\n\n    exitTransition(\n      {\n        enterActive: [\"s-enter-active\"],\n        enterTo: [\"s-enter-to\"],\n        enter: [\"s-enter\"],\n        exitActive: [\"s-exit-active\"],\n        exitTo: [\"s-exit-to\"],\n        exit: [\"s-exit\"],\n        move: [\"s-move\"],\n      },\n      {},\n      el,\n      () => (capturedClassName = el.className),\n    );\n\n    expect(el.className).toBe(\"s-exit s-exit-active\");\n    expect(capturedClassName).toBe(null);\n\n    flushRaf();\n    flushRaf();\n\n    expect(el.className).toBe(\"s-exit-active s-exit-to\");\n    expect(capturedClassName).toBe(null);\n\n    el.dispatchEvent(new Event(\"transitionend\"));\n\n    expect(capturedClassName).toBe(\"s-exit-active s-exit-to\");\n  });\n});\n"
  },
  {
    "path": "test/server.test.tsx",
    "content": "import { describe, expect, it } from \"vitest\";\nimport { Transition } from \"../src/index.js\";\nimport { renderToString } from \"solid-js/web\";\n\ndescribe(\"Transition\", () => {\n  it(\"returns elements in SSR\", () => {\n    const html = renderToString(() => (\n      <Transition>\n        <div>hello</div>\n      </Transition>\n    ));\n\n    expect(html).toBe(\"<div>hello</div>\");\n  });\n});\n"
  },
  {
    "path": "tsconfig.build.json",
    "content": "{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"composite\": true,\n    \"rootDir\": \"src\",\n    \"outDir\": \"dist\",\n    \"noEmit\": false\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"module\": \"NodeNext\",\n    \"target\": \"ESNext\",\n    \"moduleResolution\": \"NodeNext\",\n    \"lib\": [\"DOM\", \"ESNext\"],\n    \"types\": [],\n    \"newLine\": \"LF\",\n    \"noEmit\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"isolatedModules\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noUncheckedIndexedAccess\": true,\n    \"skipLibCheck\": true,\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\",\n    \"paths\": {\n      \"solid-transition-group\": [\"./src/index.ts\"]\n    }\n  },\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "vitest.config.ts",
    "content": "import { defineConfig } from \"vitest/config\";\nimport solidPlugin from \"vite-plugin-solid\";\n\nexport default defineConfig(({ mode }) => {\n  // to test in server environment, run with \"--mode ssr\" or \"--mode test:ssr\" flag\n  // loads only server.test.ts file\n  const testSSR = mode === \"test:ssr\" || mode === \"ssr\";\n\n  return {\n    plugins: [\n      solidPlugin({\n        // https://github.com/solidjs/solid-refresh/issues/29\n        hot: false,\n        // For testing SSR we need to do a SSR JSX transform\n        solid: { generate: testSSR ? \"ssr\" : \"dom\" },\n      }),\n    ],\n    test: {\n      watch: false,\n      isolate: !testSSR,\n      environment: testSSR ? \"node\" : \"jsdom\",\n      transformMode: { web: [/\\.[jt]sx$/] },\n      ...(testSSR\n        ? {\n            include: [\"test/server.test.{ts,tsx}\"],\n          }\n        : {\n            include: [\"test/*.test.{ts,tsx}\"],\n            exclude: [\"test/server.test.{ts,tsx}\"],\n          }),\n    },\n    resolve: {\n      conditions: testSSR ? [\"node\"] : [\"browser\", \"development\"],\n    },\n  };\n});\n"
  }
]