{"id":47605345,"url":"https://github.com/spark-js/spark","last_synced_at":"2026-04-01T19:11:25.292Z","repository":{"id":57366903,"uuid":"92284262","full_name":"spark-js/spark","owner":"spark-js","description":"Helper library for web components","archived":false,"fork":false,"pushed_at":"2023-01-18T18:03:18.000Z","size":210,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-01T23:42:59.287Z","etag":null,"topics":["library","tsx","typescript","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/spark-js.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}},"created_at":"2017-05-24T11:19:10.000Z","updated_at":"2025-09-29T11:40:31.000Z","dependencies_parsed_at":"2023-02-10T16:31:18.065Z","dependency_job_id":null,"html_url":"https://github.com/spark-js/spark","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/spark-js/spark","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spark-js%2Fspark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spark-js%2Fspark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spark-js%2Fspark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spark-js%2Fspark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spark-js","download_url":"https://codeload.github.com/spark-js/spark/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spark-js%2Fspark/sbom","scorecard":{"id":840285,"data":{"date":"2025-08-11","repo":{"name":"github.com/spark-js/spark","commit":"38be9ea3f5c92dd54b17a882468541d07b5ec04f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"121 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2","Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-8g7p-74h8-hg48","Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-hxcm-v35h-mg2x","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-jv35-xqg7-f92r","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-325j-24f4-qv5x","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-pv4c-p2j5-38j4","Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T20:19:12.643Z","repository_id":57366903,"created_at":"2025-08-23T20:19:12.643Z","updated_at":"2025-08-23T20:19:12.643Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31291099,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["library","tsx","typescript","web-components"],"created_at":"2026-04-01T19:11:24.567Z","updated_at":"2026-04-01T19:11:25.276Z","avatar_url":"https://github.com/spark-js.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[logo]: https://cdn.rawgit.com/spark-js/spark/master/docs/spark_logo.svg\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://cdn.rawgit.com/spark-js/spark/master/docs/spark_logo.svg\" height=200 /\u003e\n\u003c/p\u003e\n\nspark.js\n=====\n\nA small library that takes the pain out of pure javascript (or typescript) [web components](https://developers.google.com/web/fundamentals/architecture/building-components/customelements).\n\n## What spark.js does\nSpark.js is primarily used to handle template updates and attribute changes, using only javascript/typescript. There are other libraries ([Polymer](https://www.polymer-project.org)), that help you maintain your templates and attributes, but does that only in HTML files. \n\n Spark.js uses `jsx` and decorators to create web components in a very React-like way.\n\n ## Code Sample\n ```jsx\nimport { CustomElement, h } from 'spark.js';\n\nclass MyComponent extends CustomElement('my-component') {\n    get template() {\n        return \u003cdiv\u003eHello!\u003c/div\u003e\n    }\n}\n\nwindow.customElements.define(MyComponent.is, MyComponent);\n ```\n\nAdvanced:\n```jsx\nimport { CustomElement, h, ObserveAttribute } from 'spark.js';\n\ninterface PersonProps {\n    age: number;\n}\nclass Person extends CustomElement\u003cPersonProps\u003e('person-comp') {\n    \n    @ObserveAttribute()\n    age: number;\n\n    get template() {\n        return \u003cdiv\u003eI am {this.age}\u003c/div\u003e\n    }\n}\nwindow.customElements.define(Person.is, Person);\n\nclass Place extends CustomElement('place-comp') {\n    get template() {\n        return \u003cPerson age={2}\u003e\n    }\n\n    get styles() {\n        return `\n            :host {\n                background-color: royalblue;\n            }\n        `\n    }\n}\nwindow.customElements.define(Place.is, Place);\n\n```\n\n## Getting Started\n### Installation\n`\nnpm install -S spark.js\n`\n\n### Configuration\nThe bare minimum `tsconfig.json`. \n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es2015\",\n    \"module\": \"es2015\",\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"h\",\n    \"moduleResolution\": \"node\",\n    \"lib\": [\n      \"es2015\",\n      \"dom\"\n    ],\n    \"experimentalDecorators\": true\n  }\n}\n```\n\nHere's a default `webpack.config.js` that you can use to get started.\n```javascript\nmodule.exports = {\n    entry: './spark-component.tsx',\n    module: {\n        rules: [\n            {\n                test: /\\.tsx?$/,\n                use: 'ts-loader',\n                exclude: /node_modules/\n            }\n        ]\n    },\n    resolve: {\n        extensions: [\".tsx\", \".ts\", \".js\"]\n    },\n    output: {\n        filename: 'spark-component.js',\n        path: __dirname\n    }\n};\n```\n\n## Events\nSpark.js does not have any kind of special event system. You can use whatever kind of event system you want that works with Web Components. \n\nThere are few things to note when using spark.js components with events within each other:\n\n* Events must start with `on` and are optional in the component props. eg. `onCelebrate`\n* When dispatching an event, the event name must be what comes after `on`.\n```jsx\nimport { CustomElement, h, ObserveAttribute } from 'spark.js';\n\ninterface PersonProps {\n    onCelebrate?: (data: CustomEvent) =\u003e void;\n}\nclass Person extends CustomElement\u003cPersonProps\u003e('person-comp') {\n\n    get template() {\n        return \u003cdiv onClick={this.onClick}\u003eCelebrate!\u003c/div\u003e\n    }\n\n    onClick(event) {\n        this.dispatchEvent(new CustomEvent('celebrate', {\n            bubbles: true,\n            detail: 'Celebrate!'\n        }););\n    }\n}\nwindow.customElements.define(Person.is, Person);\n\nclass Place extends CustomElement('place-comp') {\n    get template() {\n        return \u003cPerson onCelebrate={(event) =\u003e this.celebrate(event)}\u003e\n    }\n\n    celebrate(event: CustomEvent) {\n        console.log(event.detail);\n    }\n\n}\nwindow.customElements.define(Place.is, Place);\n```\n\n## Top level APIs\n\n### `CustomElement`\nThe base class that all spark.js component inherit from. Takes 1 argument for the name of the component.\n  \nThis sets static properties for better component management:\n* `is` returns the name of the web component.\n* `observedAttributes` returns all properties with `@ObserveAttribute` on them. This is the same static property as standard Web Components.\n  \nComponents can override the `template` and `style` property.\n* `template` must return `VNode`.\n* `styles` must return a string.\n\n```jsx\nclass MyComponent extends CustomElement\u003cprops\u003e('my-component') {\n\n    get template() {\n        return \u003cdiv\u003eHi\u003c/div\u003e\n    }\n\n    get styles() {\n        `\n        :host {\n            background-color: royalblue;\n        }\n        `\n    }\n}\n\ncustomElements.define(MyComponent.is, MyComponent)\n```\n\n\n### `ObserveAttribute`\nWhen ObserveAttribute is added to a property in a spark.js component, \nany changes made on the attribute (through DOM or setAttribute) are reflected back to the class property\n \nWhen set to true, then any changes done on the property programmatically (eg. `querySelector('my-comp').property = 'test'`) are reflected on the attribute\n\nWhenever an property or attribute changes with `ObserveAttribute`, spark.js will update the DOM automatically. \n \n### `h`\nFunction used to create a `VNode`\n\n```jsx\n...\nget template() {\n    return h('div', { disabled: false }, ['hello'])\n}\n...\n```\n#### Typescript\nIf using Typescript you can specify to use `h` in the `jsxFactory` value in `tsconfig.json`. \n```\n{\n  \"compilerOptions\": {\n    \"target\": \"es2015\",\n    \"module\": \"es2015\",\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"h\",\n    \"moduleResolution\": \"node\",\n    \"lib\": [\n      \"es2015\",\n      \"dom\"\n    ],\n    \"experimentalDecorators\": true\n  }\n}\n```\n#### Babel\nFor Babel configuration, follow this [guide](https://babeljs.io/docs/plugins/transform-react-jsx/) to set up `h` with Babel. \n\nBasically, if using `.babelrc ` use the following:\n```\n{\n  \"plugins\": [\n    [\"transform-react-jsx\", {\n      \"pragma\": \"h\" // default pragma is React.createElement\n    }]\n  ]\n}\n```\n\nFor individual files, use `/** @jsx dom */`\n\n\nAfter configuring your transpiler of choice, you can then just use `jsx` to create `h` functions.\n\n\n## Life cycle\nSince spark.js is just a helper library for Web Components, all the standard Web Component events happen automatically. \n\nFor each of the below life cycles, you must call `super()` when providing your own functionality. This ensures that spark.js functionality get called whenever you provide your own functions.\n\n| Callback | Description |\n|--|--|\n| connectedCallback() | Called every time the element is inserted into the DOM. Useful for running setup code, such as fetching resources or rendering. Generally, you should try to delay work until this time.|\n| disconnectedCallback() |\tCalled every time the element is removed from the DOM. Useful for running clean up code (removing event listeners, etc.).\n| attributeChangedCallback(attrName, oldVal, newVal) |\tAn attribute was added, removed, updated, or replaced. Also called for initial values when an element is created by the parser, or upgraded. Note: only attributes listed in the observedAttributes property will receive this callback. |\n| adoptedCallback() |\tThe custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).|","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspark-js%2Fspark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspark-js%2Fspark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspark-js%2Fspark/lists"}