[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1094":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":14,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":15,"starSnapshotCount":15,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},1094,"isolet","millionco\u002Fisolet","millionco","Package any component into a self-contained, isolated widget","",null,"TypeScript",389,6,1,0,22,2.54,"MIT License",false,"main",[22,5,23],"iife","widget","2026-06-12 02:00:23","# isolet\n\n> **Warning:** This project is very experimental. APIs may change without notice.\n\nPackage any component into a self-contained, isolated widget.\n\nWorks with React, Solid, Svelte, vanilla JS, or anything that can render into a DOM element. Ships as a script tag, ESM import, or CommonJS require.\n\n## Install\n\n```sh\nnpm install isolet-js\n```\n\n## Quick start\n\nThe core API is one function: `createIsolet`. You give it a name, a mount function, and optionally some CSS. It gives you back `mount`, `update`, and `unmount`.\n\n```tsx\nimport { createIsolet } from \"isolet-js\";\nimport { react } from \"isolet-js\u002Freact\";\n\nfunction Hello({ name }: { name: string }) {\n  return \u003Ch1>Hello, {name}!\u003C\u002Fh1>;\n}\n\nconst widget = createIsolet({\n  name: \"hello\",\n  mount: react(Hello),\n  css: `h1 { color: tomato; font-family: sans-serif; }`,\n});\n\nwidget.mount(document.body, { name: \"World\" });\n```\n\nThe component renders inside a shadow DOM by default. Styles are scoped. Nothing leaks in or out.\n\n## CLI\n\nDistribute your component as a self-contained bundle. The CLI reads your config, resolves CSS + assets, and outputs a drop-in artifact.\n\n```sh\nnpx isolet-js init    # scaffold an isolet.config.ts\nnpx isolet-js build   # bundle widget(s) from config\nnpx isolet-js build --watch   # rebuild on changes\nnpx isolet-js build --minify  # minified production build\n```\n\n### Config\n\n```ts\n\u002F\u002F isolet.config.ts\nimport { defineConfig } from \"isolet-js\";\n\nexport default defineConfig({\n  name: \"my-widget\",\n  entry: \".\u002Fsrc\u002Findex.ts\",\n  styles: \".\u002Fsrc\u002Fwidget.css\",       \u002F\u002F CSS to inline (url() assets auto-resolved)\n  format: [\"iife\", \"esm\"],          \u002F\u002F output formats\n  \u002F\u002F outDir: \".\u002Fdist\",              \u002F\u002F output directory (default: \"dist\")\n  \u002F\u002F globalName: \"MyWidget\",        \u002F\u002F global name for IIFE builds\n  \u002F\u002F external: [\"react\"],           \u002F\u002F don't bundle these\n  \u002F\u002F dts: true,                     \u002F\u002F emit .d.ts files\n  \u002F\u002F minify: true,                  \u002F\u002F minify output\n  \u002F\u002F platform: \"browser\",           \u002F\u002F target platform (default: \"browser\")\n  \u002F\u002F autoMount: true,               \u002F\u002F auto-mount to documentElement in IIFE (default: true)\n});\n```\n\nYou can also export an array for multiple widgets:\n\n```ts\nexport default defineConfig([\n  { name: \"widget-a\", entry: \".\u002Fsrc\u002Fa.ts\", styles: \".\u002Fsrc\u002Fa.css\" },\n  { name: \"widget-b\", entry: \".\u002Fsrc\u002Fb.ts\", format: [\"esm\"] },\n]);\n```\n\n### What the build does\n\n- Reads `styles` from config, inlines all `url()` references (fonts, images) as data URIs\n- Makes processed CSS available as `__ISOLET_CSS__` in your entry code\n- Converts all `.css` imports to JS string exports (shadow DOM safe)\n- Inlines static asset imports (`.png`, `.woff2`, `.mp3`, etc.) as data URIs\n- Resolves `styles: \".\u002Fpath.css\"` in `createIsolet`\u002F`defineElement` calls at build time\n- Outputs IIFE (script tag), ESM, and\u002For CJS depending on `format`\n\n## Framework adapters\n\nAdapters are thin wrappers that handle framework-specific mounting. The core doesn't import or depend on any framework.\n\n### React\n\n```ts\nimport { createIsolet } from \"isolet-js\";\nimport { react } from \"isolet-js\u002Freact\";\nimport { MyComponent } from \".\u002FMyComponent\";\n\nconst widget = createIsolet({\n  name: \"my-widget\",\n  mount: react(MyComponent),\n  css: styles,\n});\n\nwidget.mount(document.body, { title: \"Hello\" });\nwidget.update({ title: \"Updated\" });\nwidget.unmount();\n```\n\n### Vanilla\n\n```ts\nimport { createIsolet } from \"isolet-js\";\nimport { vanilla } from \"isolet-js\u002Fvanilla\";\n\nconst widget = createIsolet({\n  name: \"counter\",\n  mount: vanilla((container, props) => {\n    let count = props.initial ?? 0;\n    const btn = document.createElement(\"button\");\n    btn.textContent = `Count: ${count}`;\n    btn.onclick = () => { btn.textContent = `Count: ${++count}`; };\n    container.appendChild(btn);\n\n    return () => container.removeChild(btn);\n  }),\n});\n```\n\n### Bring your own\n\nThe `mount` function is just `(container: HTMLElement, props) => cleanup | void`. Use whatever you want:\n\n```ts\n\u002F\u002F Solid\nimport { render } from \"solid-js\u002Fweb\";\n\ncreateIsolet({\n  name: \"solid-widget\",\n  mount(container, props) {\n    const dispose = render(() => \u003CApp {...props} \u002F>, container);\n    return dispose;\n  },\n});\n\n\u002F\u002F Svelte\nimport App from \".\u002FApp.svelte\";\n\ncreateIsolet({\n  name: \"svelte-widget\",\n  mount(container, props) {\n    const app = new App({ target: container, props });\n    return () => app.$destroy();\n  },\n});\n```\n\n## Isolation modes\n\nControl how the widget is isolated from the host page.\n\n```ts\ncreateIsolet({\n  name: \"my-widget\",\n  mount: myMount,\n  isolation: \"shadow-dom\", \u002F\u002F default: full CSS isolation via shadow DOM\n});\n\ncreateIsolet({\n  name: \"my-widget\",\n  mount: myMount,\n  isolation: \"scoped\", \u002F\u002F plain div wrapper, styles injected globally\n});\n\ncreateIsolet({\n  name: \"my-widget\",\n  mount: myMount,\n  isolation: \"none\", \u002F\u002F mount directly into the target element\n});\n```\n\n## CSS & asset handling\n\n`isolet build` automatically handles CSS and assets — no manual plugin setup required:\n\n- **`styles` in config** → CSS files are read, all `url()` references (fonts, images) are inlined as data URIs, and the result is available as `__ISOLET_CSS__` in your entry\n- **`.css` imports** → converted to JS string exports (shadow DOM safe)\n- **Asset imports** (`.png`, `.woff2`, `.mp3`, etc.) → inlined as data URIs\n- **`styles: \".\u002Fpath.css\"` in `createIsolet`\u002F`defineElement`** → resolved and inlined at build time\n\n```ts\n\u002F\u002F Your entry file — just reference css, the CLI handles the rest\ncreateIsolet({\n  name: \"my-widget\",\n  css: __ISOLET_CSS__,  \u002F\u002F injected by isolet build from config styles field\n  mount: myMount,\n});\n\n\u002F\u002F Or inline the path directly:\ncreateIsolet({\n  name: \"my-widget\",\n  styles: \".\u002Fwidget.css\",  \u002F\u002F auto-resolved at build time\n  mount: myMount,\n});\n```\n\nIf you're using `vp pack` or Vite directly instead of the CLI, add the plugins manually:\n\n```ts\n\u002F\u002F vite.config.ts\nimport { cssTextPlugin, inlineAssetsPlugin, autoStylesPlugin } from \"isolet-js\u002Fplugins\";\n```\n\n## Script tag usage\n\nThe IIFE build exposes `Isolet` on the global scope:\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fisolet-js\u002Fdist\u002Findex.iife.js\">\u003C\u002Fscript>\n\u003Cscript>\n  const { createIsolet } = Isolet;\n\n  const widget = createIsolet({\n    name: \"inline-widget\",\n    mount(container) {\n      container.innerHTML = \"\u003Cp>Loaded via script tag\u003C\u002Fp>\";\n    },\n  });\n\n  widget.mount(document.body);\n\u003C\u002Fscript>\n```\n\n## API\n\n### `createIsolet(options)`\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `name` | `string` | required | Unique identifier for the widget |\n| `mount` | `(container, props) => cleanup?` | required | Render function |\n| `css` | `string` | - | CSS text to inject |\n| `isolation` | `\"shadow-dom\" \\| \"scoped\" \\| \"none\"` | `\"shadow-dom\"` | Isolation strategy |\n| `shadowMode` | `\"open\" \\| \"closed\"` | `\"open\"` | Shadow DOM mode |\n| `hostAttributes` | `Record\u003Cstring, string>` | - | Attributes on host element |\n| `zIndex` | `string \\| number` | - | z-index on host element |\n\nReturns an `IsoletInstance`:\n\n| Method\u002FProperty | Description |\n|---|---|\n| `mount(target?, props?)` | Mount into target (defaults to `document.body`) |\n| `update(props)` | Update with partial props |\n| `unmount()` | Unmount and clean up |\n| `container` | The render container element |\n| `shadowRoot` | The shadow root (if shadow DOM mode) |\n| `mounted` | Whether currently mounted |\n\n## License\n\nMIT\n","isolet 是一个用于将任何组件打包成独立且隔离的小部件的工具。它支持React、Solid、Svelte等前端框架，也兼容纯JavaScript编写的组件，并能够通过脚本标签、ESM导入或CommonJS require的方式进行分发。isolet的核心功能是通过`createIsolet`函数生成小部件，该函数接受名称、挂载函数和可选的CSS样式作为参数，返回挂载、更新和卸载方法。此外，isolet还提供了一个CLI工具来帮助开发者配置并构建这些独立的小部件，自动处理CSS与静态资源的内联，确保样式作用域不会泄露。此项目非常适合需要创建可重用且环境隔离的UI组件场景下使用。",2,"2026-06-11 02:41:36","CREATED_QUERY"]