test: add more fixtures

Author: aminya

benchmark/js-benchmark.mjs

@@ -18,4 +18,4 @@ await Promise.all(
 )
 
 const t2 = performance.now()
-console.log(((t2 - t1)/1000).toFixed(3), "seconds")
+console.log(((t2 - t1) / 1000).toFixed(3), "seconds")

benchmark/native-benchmark.mjs

@@ -8,4 +8,4 @@ const t1 = performance.now()
 await minifyFiles(jsonFiles)
 
 const t2 = performance.now()
-console.log(((t2 - t1)/1000).toFixed(3), "seconds")
+console.log(((t2 - t1) / 1000).toFixed(3), "seconds")

test/fixtures/asyncresource.json

@@ -0,0 +1,8 @@
+{
+  "files": [
+    {
+      "name": "main",
+      "content": "import { createSignal, createResource } from \"solid-js\";\nimport { render } from \"solid-js/web\";\n\nconst fetchUser = async (id) =>\n  (await fetch(`https://swapi.dev/api/people/${id}/`)).json();\n\nconst App = () => {\n  const [userId, setUserId] = createSignal();\n  const [user] = createResource(userId, fetchUser);\n\n  return (\n    <>\n      <input\n        type=\"number\"\n        min=\"1\"\n        placeholder=\"Enter Numeric Id\"\n        onInput={(e) => setUserId(e.currentTarget.value)}\n      />\n      <span>{user.loading && \"Loading...\"}</span>\n      <div>\n        <pre>{JSON.stringify(user(), null, 2)}</pre>\n      </div>\n    </>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));"
+    }
+  ]
+}

test/fixtures/counter.json

@@ -0,0 +1,25 @@
+{
+  "name": "Counter",
+  "description": "A simple standard counter example",
+  "files": [
+    {
+      "name": "main",
+      "content": [
+        "import { createSignal, onCleanup } from \"solid-js\";",
+        "import { render } from \"solid-js/web\";",
+        "",
+        "const CountingComponent = () => {",
+        "\tconst [count, setCount] = createSignal(0);",
+        "\tconst interval = setInterval(",
+        "\t\t() => setCount(c => c + 1),",
+        "\t\t1000",
+        "\t);",
+        "\tonCleanup(() => clearInterval(interval));",
+        "\treturn <div>Count value is {count()}</div>;",
+        "};",
+        "",
+        "render(() => <CountingComponent />, document.getElementById(\"app\"));"
+      ]
+    }
+  ]
+}

test/fixtures/counterstore.json

@@ -0,0 +1,12 @@
+{
+  "files": [
+    {
+      "name": "main",
+      "content": "import { render } from \"solid-js/web\";\nimport { CounterProvider, useCounter } from \"CounterStore.tsx\";\n\nconst MiddleComponent = () => <NestedComponent />;\n\nconst NestedComponent = () => {\n  const [count, { increment, decrement }] = useCounter();\n  return (\n    <>\n      <p>{count()}</p>\n      <button onClick={increment}>+</button>\n      <button onClick={decrement}>-</button>\n    </>\n  );\n};\n\nconst App = () => (\n  <CounterProvider count={7}>\n    <MiddleComponent />\n  </CounterProvider>\n);\n\nrender(App, document.getElementById(\"app\"));"
+    },
+    {
+      "name": "CounterStore",
+      "content": "import { createSignal, createContext, useContext, Component } from \"solid-js\";\n\ntype CounterStore = [\n  () => number,\n  { increment?: () => void; decrement?: () => void }\n];\n\nconst CounterContext = createContext<CounterStore>([() => 0, {}]);\n\nexport const CounterProvider: Component<{ count: number }> = props => {\n  const [count, setCount] = createSignal(props.count || 0),\n    store: CounterStore = [\n      count,\n      {\n        increment() {\n          setCount(c => c + 1);\n        },\n        decrement() {\n          setCount(c => c - 1);\n        }\n      }\n    ];\n\n  return (\n    <CounterContext.Provider value={store}>\n      {props.children}\n    </CounterContext.Provider>\n  );\n};\n\nexport function useCounter() {\n  return useContext(CounterContext);\n}"
+    }
+  ]
+}

test/fixtures/cssanimations.json

@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "name": "main",
+      "content": "import { createSignal, For, Match, Switch } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Transition, TransitionGroup } from \"solid-transition-group\";\nimport \"./styles.css\"\n\nfunction shuffle(array) {\n  return array.sort(() => Math.random() - 0.5);\n}\nlet nextId = 10;\n\nconst App = () => {\n  const [show, toggleShow] = createSignal(true),\n    [select, setSelect] = createSignal(0),\n    [numList, setNumList] = createSignal([1, 2, 3, 4, 5, 6, 7, 8, 9]),\n    randomIndex = () => Math.floor(Math.random() * numList().length);\n\n  return (\n    <>\n      <button onClick={() => toggleShow(!show())}>\n        {show() ? \"Hide\" : \"Show\"}\n      </button>\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\n            facilisis enim libero, at lacinia diam fermentum id. Pellentesque\n            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\n            facilisis enim libero, at lacinia diam fermentum id. Pellentesque\n            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 }], {\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() && (\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris\n            facilisis enim libero, at lacinia diam fermentum id. Pellentesque\n            habitant morbi tristique senectus et netus.\n          </div>\n        )}\n      </Transition>\n      <br />\n      <b>Switch OutIn</b>\n      <br />\n      <button onClick={() => setSelect((select() + 1) % 3)}>Next</button>\n      <Transition name=\"fade\" mode=\"outin\">\n        <Switch>\n          <Match when={select() === 0}>\n            <p class=\"container\">The First</p>\n          </Match>\n          <Match when={select() === 1}>\n            <p class=\"container\">The Second</p>\n          </Match>\n          <Match when={select() === 2}>\n            <p class=\"container\">The Third</p>\n          </Match>\n        </Switch>\n      </Transition>\n      <b>Group</b>\n      <br />\n      <button\n        onClick={() => {\n          const list = numList(),\n            idx = randomIndex();\n          setNumList([...list.slice(0, idx), nextId++, ...list.slice(idx)]);\n        }}\n      >\n        Add\n      </button>\n      <button\n        onClick={() => {\n          const list = numList(),\n            idx = randomIndex();\n          setNumList([...list.slice(0, idx), ...list.slice(idx + 1)]);\n        }}\n      >\n        Remove\n      </button>\n      <button\n        onClick={() => {\n          const randomList = shuffle(numList().slice());\n          setNumList(randomList);\n        }}\n      >\n        Shuffle\n      </button>\n      <br />\n      <TransitionGroup name=\"list-item\">\n        <For each={numList()}>{(r) => <span class=\"list-item\">{r}</span>}</For>\n      </TransitionGroup>\n    </>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));"
+    },
+    {
+      "name": "styles",
+      "type": "css",
+      "content": ".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.list-item {\n  transition: all 0.5s;\n  display: inline-block;\n  margin-right: 10px;\n}\n\n.list-item-enter,\n.list-item-exit-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n.list-item-exit-active {\n  position: absolute;\n}\n"
+    }
+  ]
+}

test/fixtures/forms.json

@@ -0,0 +1,17 @@
+{
+  "files": [
+    {
+      "name": "main",
+      "content": "// @ts-nocheck\nimport { render } from \"solid-js/web\";\nimport { createStore } from \"solid-js/store\";\nimport { useForm } from \"./validation\";\nimport \"./styles.css\";\n\nconst EMAILS = [\"[email protected]\", \"[email protected]\", \"[email protected]\"];\n\nfunction fetchUserName(name) {\n  return new Promise((resolve) => {\n    setTimeout(() => resolve(EMAILS.indexOf(name) > -1), 200);\n  });\n}\n\nconst ErrorMessage = ({ error }) => <span class=\"error-message\">{error}</span>;\n\nconst App = () => {\n  const { validate, formSubmit, errors } = useForm({\n    errorClass: \"error-input\"\n  });\n  const [fields, setFields] = createStore();\n  const fn = (form) => {\n    // form.submit()\n    console.log(\"Done\");\n  };\n  const userNameExists = async ({ value }) => {\n    const exists = await fetchUserName(value);\n    return exists && `${value} is already being used`;\n  };\n  const matchesPassword = ({ value }) =>\n    value === fields.password ? false : \"Passwords must Match\";\n\n  return (\n    <form use:formSubmit={fn}>\n      <h1>Sign Up</h1>\n      <div class=\"field-block\">\n        <input\n          name=\"email\"\n          type=\"email\"\n          placeholder=\"Email\"\n          required\n          use:validate={[userNameExists]}\n        />\n        {errors.email && <ErrorMessage error={errors.email} />}\n      </div>\n      <div class=\"field-block\">\n        <input\n          type=\"password\"\n          name=\"password\"\n          placeholder=\"Password\"\n          required=\"\"\n          minlength=\"8\"\n          onInput={(e) => setFields(\"password\", e.target.value)}\n          use:validate\n        />\n        {errors.password && <ErrorMessage error={errors.password} />}\n      </div>\n      <div class=\"field-block\">\n        <input\n          type=\"password\"\n          name=\"confirmpassword\"\n          placeholder=\"Confirm Password\"\n          required=\"\"\n          use:validate={[matchesPassword]}\n        />\n        {errors.confirmpassword && (\n          <ErrorMessage error={errors.confirmpassword} />\n        )}\n      </div>\n\n      <button type=\"submit\">Submit</button>\n    </form>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));\n"
+    },
+    {
+      "name": "validation",
+      "content": "import { createStore } from \"solid-js/store\";\n\nfunction checkValid({ element, validators = [] }, setErrors, errorClass) {\n  return async () => {\n    element.setCustomValidity(\"\");\n    element.checkValidity();\n    let message = element.validationMessage;\n    if (!message) {\n      for (const validator of validators) {\n        const text = await validator(element);\n        if (text) {\n          element.setCustomValidity(text);\n          break;\n        }\n      }\n      message = element.validationMessage;\n    }\n    if (message) {\n      errorClass && element.classList.toggle(errorClass, true);\n      setErrors({ [element.name]: message });\n    }\n  };\n}\n\nexport function useForm({ errorClass }) {\n  const [errors, setErrors] = createStore({}),\n    fields = {};\n\n  const validate = (ref, accessor) => {\n    const validators = accessor() || [];\n    let config;\n    fields[ref.name] = config = { element: ref, validators };\n    ref.onblur = checkValid(config, setErrors, errorClass);\n    ref.oninput = () => {\n      if (!errors[ref.name]) return;\n      setErrors({ [ref.name]: undefined });\n      errorClass && ref.classList.toggle(errorClass, false);\n    };\n  };\n\n  const formSubmit = (ref, accessor) => {\n    const callback = accessor() || (() => {});\n    ref.setAttribute(\"novalidate\", \"\");\n    ref.onsubmit = async (e) => {\n      e.preventDefault();\n      let errored = false;\n\n      for (const k in fields) {\n        const field = fields[k];\n        await checkValid(field, setErrors, errorClass)();\n        if (!errored && field.element.validationMessage) {\n          field.element.focus();\n          errored = true;\n        }\n      }\n      !errored && callback(ref);\n    };\n  };\n\n  return { validate, formSubmit, errors };\n}\n"
+    },
+    {
+      "name": "styles",
+      "type": "css",
+      "content": "input {\n  display: inline-block;\n  padding: 4px;\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n.error-message {\n  color: red;\n  padding: 8px;\n}\n.error-input {\n  box-shadow: 0px 0px 2px 1px red;\n}"
+    }
+  ]
+}

test/fixtures/routing.json

@@ -0,0 +1,8 @@
+{
+  "files": [
+    {
+      "name": "main",
+      "content": "import { createSignal, onCleanup, Component } from \"solid-js\";\nimport { render, Switch, Match } from \"solid-js/web\";\n\nfunction createRouteHandler() {\n  const [location, setLocation] = createSignal(\n      window.location.hash.slice(1) || \"home\"\n    ),\n    locationHandler = () => setLocation(window.location.hash.slice(1));\n  window.addEventListener(\"hashchange\", locationHandler);\n  onCleanup(() => window.removeEventListener(\"hashchange\", locationHandler));\n  return (match: string) => match === location();\n}\n\nconst Home: Component = () => (\n  <>\n    <h1>Welcome to this Simple Routing Example</h1>\n    <p>Click the links in the Navigation above to load different routes.</p>\n  </>\n);\n\nconst Profile: Component = () => (\n  <>\n    <h1>Your Profile</h1>\n    <p>This section could be about you.</p>\n  </>\n);\n\nconst Settings: Component = () => (\n  <>\n    <h1>Settings</h1>\n    <p>All that configuration you never really ever want to look at.</p>\n  </>\n);\n\nconst App = () => {\n  const matches = createRouteHandler();\n  return (\n    <>\n      <ul>\n        <li>\n          <a href=\"#home\">Home</a>\n        </li>\n        <li>\n          <a href=\"#profile\">Profile</a>\n        </li>\n        <li>\n          <a href=\"#settings\">Settings</a>\n        </li>\n      </ul>\n      <Switch>\n        <Match when={matches(\"home\")}>\n          <Home />\n        </Match>\n        <Match when={matches(\"profile\")}>\n          <Profile />\n        </Match>\n        <Match when={matches(\"settings\")}>\n          <Settings />\n        </Match>\n      </Switch>\n    </>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));"
+    }
+  ]
+}

test/fixtures/scoreboard.json

@@ -0,0 +1,133 @@
+{
+  "name": "Scoreboard",
+  "description": "A simple standard counter example",
+  "files": [
+    {
+      "name": "main",
+      "content": [
+        "import {",
+        "\tcreateMemo,",
+        "\tcreateSignal,",
+        "\tcreateComputed,",
+        "\tonCleanup,",
+        "\tFor",
+        "} from \"solid-js\";",
+        "import { createStore } from \"solid-js/store\";",
+        "import { render } from \"solid-js/web\";",
+        "",
+        "const App = () => {",
+        "\tlet newName, newScore;",
+        "\tconst [state, setState] = createStore({",
+        "\t\t\tplayers: [",
+        "\t\t\t\t{ name: \"Mark\", score: 3 },",
+        "\t\t\t\t{ name: \"Troy\", score: 2 },",
+        "\t\t\t\t{ name: \"Jenny\", score: 1 },",
+        "\t\t\t\t{ name: \"David\", score: 8 }",
+        "\t\t\t]",
+        "\t\t}),",
+        "\t\tlastPos = new WeakMap(),",
+        "\t\tcurPos = new WeakMap(),",
+        "\t\tgetSorted = createMemo((list = []) => {",
+        "\t\t\tlist.forEach((p, i) => lastPos.set(p, i));",
+        "\t\t\tconst newList = state.players.slice().sort((a, b) => {",
+        "\t\t\t\tif (b.score === a.score) return a.name.localeCompare(b.name); // stabalize the sort",
+        "\t\t\t\treturn b.score - a.score;",
+        "\t\t\t});",
+        "\t\t\tlet updated = newList.length !== list.length;",
+        "\t\t\tnewList.forEach(",
+        "\t\t\t\t(p, i) => lastPos.get(p) !== i && (updated = true) && curPos.set(p, i)",
+        "\t\t\t);",
+        "\t\t\treturn updated ? newList : list;",
+        "\t\t}),",
+        "\t\thandleAddClick = () => {",
+        "\t\t\tconst name = newName.value,",
+        "\t\t\t\tscore = +newScore.value;",
+        "\t\t\tif (!name.length || isNaN(score)) return;",
+        "\t\t\tsetState(\"players\", (p) => [...p, { name: name, score: score }]);",
+        "\t\t\tnewName.value = newScore.value = \"\";",
+        "\t\t},",
+        "\t\thandleDeleteClick = (player) => {",
+        "\t\t\tconst idx = state.players.indexOf(player);",
+        "\t\t\tsetState(\"players\", (p) => [...p.slice(0, idx), ...p.slice(idx + 1)]);",
+        "\t\t},",
+        "\t\thandleScoreChange = (player, { target }) => {",
+        "\t\t\tconst score = +target.value;",
+        "\t\t\tconst idx = state.players.indexOf(player);",
+        "\t\t\tif (isNaN(+score) || idx < 0) return;",
+        "\t\t\tsetState(\"players\", idx, \"score\", score);",
+        "\t\t},",
+        "\t\tcreateStyles = (player) => {",
+        "\t\t\tconst [style, setStyle] = createSignal();",
+        "\t\t\tcreateComputed(() => {",
+        "\t\t\t\tgetSorted();",
+        "\t\t\t\tconst offset = lastPos.get(player) * 18 - curPos.get(player) * 18,",
+        "\t\t\t\t\tt = setTimeout(() =>",
+        "\t\t\t\t\t\tsetStyle({ transition: \"250ms\", transform: null })",
+        "\t\t\t\t\t);",
+        "\t\t\t\tsetStyle({",
+        "\t\t\t\t\ttransform: `translateY(${offset}px)`,",
+        "\t\t\t\t\ttransition: null",
+        "\t\t\t\t});",
+        "\t\t\t\tonCleanup(() => clearTimeout(t));",
+        "\t\t\t});",
+        "\t\t\treturn style;",
+        "\t\t};",
+        "",
+        "\treturn (",
+        "\t\t<div id=\"scoreboard\">",
+        "\t\t\t<div class=\"board\">",
+        "\t\t\t\t<For each={getSorted()}>",
+        "\t\t\t\t\t{(player) => {",
+        "\t\t\t\t\t\tconst getStyles = createStyles(player),",
+        "\t\t\t\t\t\t\t{ name } = player;",
+        "\t\t\t\t\t\treturn (",
+        "\t\t\t\t\t\t\t<div class=\"player\" style={getStyles()}>",
+        "\t\t\t\t\t\t\t\t<div class=\"name\">{name}</div>",
+        "\t\t\t\t\t\t\t\t<div class=\"score\">{player.score}</div>",
+        "\t\t\t\t\t\t\t</div>",
+        "\t\t\t\t\t\t);",
+        "\t\t\t\t\t}}",
+        "\t\t\t\t</For>",
+        "\t\t\t</div>",
+        "\t\t\t<form class=\"admin\">",
+        "\t\t\t\t<For each={state.players}>",
+        "\t\t\t\t\t{(player) => {",
+        "\t\t\t\t\t\tconst { name, score } = player;",
+        "\t\t\t\t\t\treturn (",
+        "\t\t\t\t\t\t\t<div class=\"player\">",
+        "\t\t\t\t\t\t\t\t{name}",
+        "\t\t\t\t\t\t\t\t<input",
+        "\t\t\t\t\t\t\t\t\tclass=\"score\"",
+        "\t\t\t\t\t\t\t\t\ttype=\"number\"",
+        "\t\t\t\t\t\t\t\t\tvalue={score}",
+        "\t\t\t\t\t\t\t\t\tonInput={[handleScoreChange, player]}",
+        "\t\t\t\t\t\t\t\t/>",
+        "\t\t\t\t\t\t\t\t<button type=\"button\" onClick={[handleDeleteClick, player]}>",
+        "\t\t\t\t\t\t\t\t\tx",
+        "\t\t\t\t\t\t\t\t</button>",
+        "\t\t\t\t\t\t\t</div>",
+        "\t\t\t\t\t\t);",
+        "\t\t\t\t\t}}",
+        "\t\t\t\t</For>",
+        "\t\t\t\t<div class=\"player\">",
+        "\t\t\t\t\t<input",
+        "\t\t\t\t\t\ttype=\"text\"",
+        "\t\t\t\t\t\tname=\"name\"",
+        "\t\t\t\t\t\tplaceholder=\"New player...\"",
+        "\t\t\t\t\t\tref={newName}",
+        "\t\t\t\t\t/>",
+        "\t\t\t\t\t<input class=\"score\" type=\"number\" name=\"score\" ref={newScore} />",
+        "\t\t\t\t\t<button type=\"button\" onClick={handleAddClick}>",
+        "\t\t\t\t\t\tAdd",
+        "\t\t\t\t\t</button>",
+        "\t\t\t\t</div>",
+        "\t\t\t</form>",
+        "\t\t</div>",
+        "\t);",
+        "};",
+        "",
+        "render(App, document.getElementById(\"app\"));"
+      ]
+    }
+  ]
+}