{"id":13533122,"url":"https://github.com/amoutonbrady/esbuild-plugin-solid","last_synced_at":"2025-04-04T07:07:30.966Z","repository":{"id":45993682,"uuid":"325884480","full_name":"amoutonbrady/esbuild-plugin-solid","owner":"amoutonbrady","description":"The `esbuild-plugin-solid` is a plugin for ESBuild that provides integration with SolidJS. It allows you to use ESBuild to bundle Solid applications, handling the specific requirements of Solid during the build process.","archived":false,"fork":false,"pushed_at":"2025-02-10T20:30:16.000Z","size":150,"stargazers_count":62,"open_issues_count":4,"forks_count":9,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-28T06:09:42.121Z","etag":null,"topics":["esbuild","plugin","solid-js","solidjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amoutonbrady.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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":"2020-12-31T22:48:35.000Z","updated_at":"2025-02-21T10:49:10.000Z","dependencies_parsed_at":"2024-01-14T02:03:27.180Z","dependency_job_id":"67eb8f22-f159-42aa-9c51-2aa9ca441b70","html_url":"https://github.com/amoutonbrady/esbuild-plugin-solid","commit_stats":{"total_commits":37,"total_committers":7,"mean_commits":5.285714285714286,"dds":"0.45945945945945943","last_synced_commit":"a62dc9139b251bde1bc2f0938a1aa94e1d09d3cd"},"previous_names":["amoutonbrady/esbuild-solid"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amoutonbrady%2Fesbuild-plugin-solid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amoutonbrady%2Fesbuild-plugin-solid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amoutonbrady%2Fesbuild-plugin-solid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amoutonbrady%2Fesbuild-plugin-solid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amoutonbrady","download_url":"https://codeload.github.com/amoutonbrady/esbuild-plugin-solid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135143,"owners_count":20889421,"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":["esbuild","plugin","solid-js","solidjs"],"created_at":"2024-08-01T07:01:16.738Z","updated_at":"2025-04-04T07:07:30.945Z","avatar_url":"https://github.com/amoutonbrady.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["DX"],"readme":"# esbuild-plugin-solid\n\nPlugin to compile [solid-js](https://github.com/ryansolid/solid) jsx components with [esbuild](https://esbuild.github.io/).\n\n## Install\n\n`solid-js` and `esbuild` are peer dependencies\n\n```bash\n# For npm\nnpm install solid-js\nnpm install -D esbuild esbuild-plugin-solid\n\n# For pnpm\npnpm add solid-js\npnpm add -D esbuild esbuild-plugin-solid\n\n# For yarn\nyarn add solid-js\nyarn add -D esbuild esbuild-plugin-solid\n```\n\n## Usage\n\nOnce installed you need to configure `esbuild` to use this plugin.\n\n```js\nconst { build } = require(\"esbuild\");\nconst { solidPlugin } = require(\"esbuild-plugin-solid\");\n\nbuild({\n  entryPoints: [\"app.jsx\"],\n  bundle: true,\n  outfile: \"out.js\",\n  plugins: [solidPlugin()],\n  // Required configuration for proper development/production handling\n  define: {\n    \"process.env.NODE_ENV\": JSON.stringify(process.env.NODE_ENV),\n  },\n  conditions: [process.env.NODE_ENV],\n}).catch(() =\u003e process.exit(1));\n```\n\n### Important Note About Environment Configuration\n\nSolid uses conditional exports to provide different builds for development and production environments. To ensure proper functionality, you need to configure esbuild with the following options:\n\n1. Set the `define` option to properly inject the `NODE_ENV` environment variable:\n\n   ```js\n   define: {\n     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)\n   }\n   ```\n\n2. Add the environment to esbuild's conditions:\n   ```js\n   conditions: [process.env.NODE_ENV];\n   ```\n\nMake sure your `NODE_ENV` is set to either `'development'` or `'production'`. These configurations ensure that Solid can properly determine the build environment and provide the appropriate optimizations and development tools.\n\n## Configuration\n\nThe following options are available and can be passed to the plugin:\n\n```ts\n/** Configuration options for esbuild-plugin-solid */\nexport interface Options {\n  /** The options to use for @babel/preset-typescript @default {} */\n  typescript: object;\n  /**\n   * Pass any additional babel transform options. They will be merged with\n   * the transformations required by Solid.\n   *\n   * @default {}\n   */\n  babel:\n    | TransformOptions\n    | ((source: string, id: string, ssr: boolean) =\u003e TransformOptions)\n    | ((source: string, id: string, ssr: boolean) =\u003e Promise\u003cTransformOptions\u003e);\n  /**\n   * Pass any additional [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions#plugin-options).\n   * They will be merged with the defaults sets by [babel-preset-solid](https://github.com/solidjs/solid/blob/main/packages/babel-preset-solid/index.js#L8-L25).\n   *\n   * @default {}\n   */\n  solid: {\n    /**\n     * The name of the runtime module to import the methods from.\n     *\n     * @default \"solid-js/web\"\n     */\n    moduleName?: string;\n\n    /**\n     * The output mode of the compiler.\n     * Can be:\n     * - \"dom\" is standard output\n     * - \"ssr\" is for server side rendering of strings.\n     * - \"universal\" is for using custom renderers from solid-js/universal\n     *\n     * @default \"dom\"\n     */\n    generate?: \"ssr\" | \"dom\" | \"universal\";\n\n    /**\n     * Indicate whether the output should contain hydratable markers.\n     *\n     * @default false\n     */\n    hydratable?: boolean;\n\n    /**\n     * Boolean to indicate whether to enable automatic event delegation on camelCase.\n     *\n     * @default true\n     */\n    delegateEvents?: boolean;\n\n    /**\n     * Boolean indicates whether smart conditional detection should be used.\n     * This optimizes simple boolean expressions and ternaries in JSX.\n     *\n     * @default true\n     */\n    wrapConditionals?: boolean;\n\n    /**\n     * Boolean indicates whether to set current render context on Custom Elements and slots.\n     * Useful for seemless Context API with Web Components.\n     *\n     * @default true\n     */\n    contextToCustomElements?: boolean;\n\n    /**\n     * Array of Component exports from module, that aren't included by default with the library.\n     * This plugin will automatically import them if it comes across them in the JSX.\n     *\n     * @default [\"For\",\"Show\",\"Switch\",\"Match\",\"Suspense\",\"SuspenseList\",\"Portal\",\"Index\",\"Dynamic\",\"ErrorBoundary\"]\n     */\n    builtIns?: string[];\n  };\n}\n```\n\n## How it works\n\nThis is a 30 lines of code plugin. All it does is parse every import source code, check if JSX syntax is present using a dumb regex and transforming the file with `@babel/core`, `@babel/preset-typescript` and `babel-preset-solid`.\n\nOut of the box it checks every `/(t|j)sx?/` files and only transforms the one with JSX syntax in it.\n\n## Contributing\n\nThis package uses [pnpm](https://pnpm.js.org/) so you might want to install it if you don't have it.\n\nOnce done, you can just `pnpm build` \u0026 `pnpm test` to build \u0026 test your changes.\n\n`pnpm test` [will build](./scripts/test.js) a [dumb module](./tests/index.tsx) with the plugin and open a local web server serving the `tests` folder for you to check if things still work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famoutonbrady%2Fesbuild-plugin-solid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famoutonbrady%2Fesbuild-plugin-solid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famoutonbrady%2Fesbuild-plugin-solid/lists"}