{"id":15162150,"url":"https://github.com/lenovo-it/widgets-factory","last_synced_at":"2026-02-02T22:41:21.601Z","repository":{"id":227833976,"uuid":"772502539","full_name":"lenovo-it/widgets-factory","owner":"lenovo-it","description":"The widgets factory.","archived":false,"fork":false,"pushed_at":"2024-03-15T10:23:42.000Z","size":124,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T00:43:53.295Z","etag":null,"topics":["boilerplate-template","custome-element","lit","napi-rs","solidjs","sveltejs","vue3","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/lenovo-it.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}},"created_at":"2024-03-15T10:15:33.000Z","updated_at":"2024-03-15T10:57:53.000Z","dependencies_parsed_at":"2024-03-15T11:48:00.592Z","dependency_job_id":"b22a7089-3b55-43bd-b37e-918ef8a5d1dd","html_url":"https://github.com/lenovo-it/widgets-factory","commit_stats":null,"previous_names":["lenovo-it/widgets-factory"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/lenovo-it/widgets-factory","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenovo-it%2Fwidgets-factory","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenovo-it%2Fwidgets-factory/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenovo-it%2Fwidgets-factory/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenovo-it%2Fwidgets-factory/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lenovo-it","download_url":"https://codeload.github.com/lenovo-it/widgets-factory/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenovo-it%2Fwidgets-factory/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263287848,"owners_count":23443084,"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":["boilerplate-template","custome-element","lit","napi-rs","solidjs","sveltejs","vue3","web-components"],"created_at":"2024-09-27T01:08:17.185Z","updated_at":"2026-02-02T22:41:16.582Z","avatar_url":"https://github.com/lenovo-it.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Widgets Factory\n\nThis is a [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) factory repository.\n\n## Prerequisites\n\nPlease set up the frontend dev environments, e.g., installing the [node.js](https://nodejs.org/en).\n\nMake sure that you have\ninstalled [pnpm](https://pnpm.io/installation#using-npm \"Fast, disk space efficient package manager.\"). This is\nthe pivotal `npm package manager` for this project.\n\n```shell\nnpm install -g pnpm\n# Or\nyarn global add pnpm\n```\n\nAnd you should have learned\none of\nthe [svelte](https://svelte.dev/), [vue3](https://vuejs.org/guide/introduction.html), [solid](https://www.solidjs.com/docs)\nor [lit](https://lit.dev/docs/) web\nfrontend framework.\n\n## Developing\n\nIn the beginning of the project setup, you should run `pnpm i` at least once to install all the required npm packages.\n\nThen start your developing process by running `pnpm run dev`.\n\nAnd visit the page where its path equals the folder you are looking for.\nE.g. If you are developing the files under packages/hello-world,\nyou should visit the page [hello-world](http://localhost:9527/hello-world).\n\n### Create a new package\n\nrun `pnpm widgets new` under the root of the package folder.\n\nNow we only\nsupport [svelte](https://svelte.dev/), [vue3](https://vuejs.org/guide/introduction.html), [solid](https://www.solidjs.com/docs)\nor [lit](https://lit.dev/docs/) web frontend\nframework.\n\n## Concepts\n\nFor the file `index.ts` or `index.tsx`.\n\nIt is vital for the target package. It's the entry of the bundled files.\n\nIt contains the export statements for\nour [custom-element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements).\n\nAnd you will see that it contains a code block, like this:\n\n```js\nif (__DEV__) {\n  // -- snip --\n}\n```\n\nThis is the `dev-use` only codes.\nThe code allows us to develop the package quickly, it will not be packed into the production-mode bundle files.\n\nAnd for the file `tailwind.css` and `tailwind.config.js` are vital for integrating with\nthe [tailwindcss](https://tailwindcss.com/)\nprocessing.\n\n## Q\u0026A\n\n- Why didn't we support `React` framework yet?\n\n  I didn't find the way to support that [Solid](https://solidjs.com/), [React](https://react.dev/)\n  or [Preact](https://preactjs.com/) both exist in the project at the mean time.\n\n  'Cause the process cannot figure out what `tsx` or `jsx` file is for `React`, `Preact` or `Solid`.\n  Means only one `tsx` or `jsx` featured framework can be supported.\n\n  Finally, I chose the [Solid](https://solidjs.com/) framework with the prejudice against\n  the [React](https://react.dev/) framework.\n\n- How about the bundle file size of each supported framework?\n\n  First of\n  all, [svelte](https://svelte.dev/) \u003c\u003c [solid](https://www.solidjs.com/docs) ≈ [lit](https://lit.dev/docs/) \u003c\u003c [vue3](https://vuejs.org/guide/introduction.html).\n\n  E.g., We use the scaffold of the `tools/widgets-cli` for testing, the bundle file size of each flavour( framework ):\n    - `svelte`: 17.3kB - 5.9kB (gzip).\n    - `solid`: 36.1kB - 12.5kB (gzip). \u003cmark\u003e2.1x bigger\u003c/mark\u003e\n    - `lit`: 42.9kB - 14.8kB (gzip). \u003cmark\u003e2.5x bigger\u003c/mark\u003e\n    - `vue3`: 70.8kB - 25.9kB (gzip). \u003cmark\u003e4.4x bigger\u003c/mark\u003e\n\n  If we are focusing on the bundle file size, we should consider prioritizing to use the [svelte](https://svelte.dev/)\n  framework.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenovo-it%2Fwidgets-factory","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flenovo-it%2Fwidgets-factory","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenovo-it%2Fwidgets-factory/lists"}