{"id":13624060,"url":"https://github.com/joshnuss/micro-svelte-compiler","last_synced_at":"2025-07-04T13:39:23.980Z","repository":{"id":42964490,"uuid":"224985293","full_name":"joshnuss/micro-svelte-compiler","owner":"joshnuss","description":"Micro Svelte compiler (naive clone)","archived":false,"fork":false,"pushed_at":"2023-07-18T20:17:17.000Z","size":121,"stargazers_count":117,"open_issues_count":5,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T05:41:20.403Z","etag":null,"topics":["compiler","generator","javascript","parser","svelte"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshnuss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-30T08:57:55.000Z","updated_at":"2024-12-13T00:55:42.000Z","dependencies_parsed_at":"2024-08-01T21:44:22.160Z","dependency_job_id":"73176656-75d7-4714-8027-030aa3e81834","html_url":"https://github.com/joshnuss/micro-svelte-compiler","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joshnuss/micro-svelte-compiler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshnuss%2Fmicro-svelte-compiler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshnuss%2Fmicro-svelte-compiler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshnuss%2Fmicro-svelte-compiler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshnuss%2Fmicro-svelte-compiler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshnuss","download_url":"https://codeload.github.com/joshnuss/micro-svelte-compiler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshnuss%2Fmicro-svelte-compiler/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263550861,"owners_count":23478876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compiler","generator","javascript","parser","svelte"],"created_at":"2024-08-01T21:01:38.392Z","updated_at":"2025-07-04T13:39:23.960Z","avatar_url":"https://github.com/joshnuss.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Micro Svelte Compiler\n\nA demonstration of how the [Svelte.js](https://svelte.dev) compiler works under the hood.\n\n## Installation\n\nDownload and install dependencies:\n\n```bash\ngit clone https://github.com/joshnuss/micro-svelte-compiler\ncd micro-svelte-compiler \u0026\u0026 yarn\n```\n\n## Compiler Stages\n\nThis compiler has multiple stages:\n\n1. Parse the `.svelte` file and extract code from `\u003cscript\u003e` tags and build a list of non-`\u003cscript\u003e` tags.\n2. Parse the code and determine props (anything with `export let ...` is a prop)\n3. Parse the tags recursively and make an ordered list of nodes and event listeners\n4. Generate JavaScript code using props, nodes, listeners, and code from script tags\n5. Format the JavaScript code\n6. Print the result to `stdout`\n\n## Dependencies\n\nIt uses similar dependencies to svelte.js (except for HTML parsing).\n\n- [acorn](https://www.npmjs.com/package/acorn): Parses JavaScript text into AST.\n- [code-red](https://www.npmjs.com/package/code-red): Generates JavaScript AST from template strings. Converts AST back to string.\n- [js-beautify](https://www.npmjs.com/package/js-beautify): Formats JavaScript text.\n- [parse5](https://www.npmjs.com/package/parse5): Parses HTML tags.\n\n## Usage\n\nSay you have a `.svelte` file like `examples/basic.svelte`:\n\n```html\n\u003cscript\u003e\n  export let name;\n\n  function handleClick(e) {\n    e.preventDefault()\n    alert(`Hello ${name}!`)\n  }\n\u003c/script\u003e\n\n\u003ch1 class=\"snazzy\" on:click=handleClick\u003eHello {name}!\u003c/h1\u003e\n```\n\nRun the compiler on it:\n\n```bash\nnpx msv examples/basic.svelte \u003e examples/basic.js\n```\n\nIt generates a JavaScript file that looks like this:\n\n```js\nexport default function component({ target, props }) {\n  let { name } = props;\n\n  function handleClick(e) {\n    e.preventDefault();\n    alert(`Hello ${name}!`);\n  }\n\n  let e0, t1, b2, t3;\n\n  return {\n    create() {\n      e0 = document.createElement(\"h1\")\n      t1 = document.createTextNode(\"Hello \")\n      b2 = document.createTextNode(name)\n      t3 = document.createTextNode(\"!\")\n\n      e0.setAttribute(\"class\", \"snazzy\")\n      e0.addEventListener(\"click\", handleClick)\n    },\n    mount() {\n      e0.appendChild(t1)\n      e0.appendChild(b2)\n      e0.appendChild(t3)\n\n      target.append(e0)\n    },\n    update(changes) {\n      if (changes.name) {\n        b2.data = name = changes.name\n      }\n    },\n    detach() {\n      target.removeChild(e0)\n    }\n  };\n}\n```\n\nTo host the component in the browser:\n\n```html\n\u003cscript src=\"example/basic.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // instantiate the component with a target node and some props\n  const c = component({target: document.body, props: {name: \"Steve Wozniak\"}})\n  // create DOM nodes\n  c.create()\n  // mount DOM nodes\n  c.mount()\n\n  // you can update props anytime:\n  c.update({name: \"Elon Musk\"})\n\n  // and cleanup the dom when it's no longer needed\n  c.detach()\n\u003c/script\u003e\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshnuss%2Fmicro-svelte-compiler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshnuss%2Fmicro-svelte-compiler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshnuss%2Fmicro-svelte-compiler/lists"}