From de4873c1b6c6e8d13c611063d5fbcd694052731d Mon Sep 17 00:00:00 2001 From: high1 Date: Sun, 2 Jan 2022 18:02:48 +0100 Subject: [PATCH 1/4] Extensions option added - added extensions option, which should contain list of additional extensions that should be also processed by vite-plugin-solid --- src/index.ts | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/index.ts b/src/index.ts index ecff288..ae5c73c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,6 +37,13 @@ export interface Options { * @default true */ hot: boolean; + /** + * This registers additional extensions that should be processed by + * vite-plugin-solid. + * + * @default undefined + */ + extensions?: string[]; /** * Pass any additional babel transform options. They will be merged with * the transformations required by Solid. @@ -230,6 +237,11 @@ export interface Options { }; } +function getExtension(filename: string): string { + const index = filename.lastIndexOf('.'); + return index < 0 ? '' : filename.substring(index); +} + export default function solidPlugin(options: Partial = {}): Plugin { let needHmr = false; let replaceDev = false; @@ -251,18 +263,14 @@ export default function solidPlugin(options: Partial = {}): Plugin { userConfig.resolve.alias = [...legacyAlias, ...normalizeAliases(userConfig.resolve?.alias)]; // fix for bundling dev in production - const nestedDeps = replaceDev ? [ - 'solid-js', - 'solid-js/web', - 'solid-js/store', - 'solid-js/html', - 'solid-js/h', - ] : []; + const nestedDeps = replaceDev + ? ['solid-js', 'solid-js/web', 'solid-js/store', 'solid-js/html', 'solid-js/h'] + : []; return { /** * We only need esbuild on .ts or .js files. - * .tsx & .jsx files are handled by us + * .tsx & .jsx files are handled by us */ esbuild: { include: /\.ts$/ }, resolve: { @@ -293,7 +301,9 @@ export default function solidPlugin(options: Partial = {}): Plugin { // see https://github.com/vitejs/vite/discussions/5109 const ssr: boolean = transformOptions === true || transformOptions?.ssr; - if (!/\.[jt]sx/.test(id)) return null; + if (!(/\.[jt]sx/.test(id) || options.extensions?.includes(getExtension(id).split('?')[0]))) + return null; + const inNodeModules = /node_modules/.test(id); let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean }; @@ -321,9 +331,7 @@ export default function solidPlugin(options: Partial = {}): Plugin { inputSourceMap: false as any, }; - if (id.includes('tsx')) { - opts.presets.push([ts, options.typescript || {}]); - } + if (id.includes('tsx')) opts.presets.push([ts, options.typescript || {}]); // Default value for babel user options let babelUserOptions: TransformOptions = {}; From d2d1872017f04208675e8f3b9d0385c28ca87d87 Mon Sep 17 00:00:00 2001 From: high1 Date: Mon, 3 Jan 2022 01:22:25 +0100 Subject: [PATCH 2/4] Updated the code - made everything more explicit, as requested - added optional typescript opt-in behavior per extension, like ['.solid', { typescript: true }] --- src/index.ts | 37 +++++++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/src/index.ts b/src/index.ts index ae5c73c..52c2af1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,6 +13,9 @@ const runtimePublicPath = '/@solid-refresh'; const runtimeFilePath = require.resolve('solid-refresh/dist/solid-refresh.mjs'); const runtimeCode = readFileSync(runtimeFilePath, 'utf-8'); +export interface ExtensionOptions { + typescript?: boolean; +} /** Configuration options for vite-plugin-solid. */ export interface Options { /** @@ -43,7 +46,7 @@ export interface Options { * * @default undefined */ - extensions?: string[]; + extensions?: (string | [string, ExtensionOptions])[]; /** * Pass any additional babel transform options. They will be merged with * the transformations required by Solid. @@ -270,7 +273,7 @@ export default function solidPlugin(options: Partial = {}): Plugin { return { /** * We only need esbuild on .ts or .js files. - * .tsx & .jsx files are handled by us + * .tsx & .jsx files are handled by us */ esbuild: { include: /\.ts$/ }, resolve: { @@ -300,9 +303,24 @@ export default function solidPlugin(options: Partial = {}): Plugin { // @ts-expect-error anticipate vite changing second parameter as options object // see https://github.com/vitejs/vite/discussions/5109 const ssr: boolean = transformOptions === true || transformOptions?.ssr; - - if (!(/\.[jt]sx/.test(id) || options.extensions?.includes(getExtension(id).split('?')[0]))) - return null; + let extension: string; + + if (!/\.[jt]sx/.test(id)) { + if (options.extensions) { + const extensionWithFlags = getExtension(id); + extension = extensionWithFlags.split('?')[0]; + + if ( + !options.extensions + .map((ext) => (typeof ext === 'string' ? ext : ext[0])) + .includes(extension) + ) { + return null; + } + } else { + return null; + } + } const inNodeModules = /node_modules/.test(id); @@ -331,7 +349,14 @@ export default function solidPlugin(options: Partial = {}): Plugin { inputSourceMap: false as any, }; - if (id.includes('tsx')) opts.presets.push([ts, options.typescript || {}]); + if ( + id.includes('tsx') || + options.extensions.find((ext) => + typeof ext === 'string' ? ext === extension : ext[0] === extension && ext[1].typescript, + ) + ) { + opts.presets.push([ts, options.typescript || {}]); + } // Default value for babel user options let babelUserOptions: TransformOptions = {}; From 86d5971a840f969e42ae99711f07ed176c7072e9 Mon Sep 17 00:00:00 2001 From: high1 Date: Mon, 3 Jan 2022 14:05:29 +0100 Subject: [PATCH 3/4] Fixed undefined issue - check if options.extensions is defined before calling find --- src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index 52c2af1..22a0f45 100644 --- a/src/index.ts +++ b/src/index.ts @@ -351,8 +351,8 @@ export default function solidPlugin(options: Partial = {}): Plugin { if ( id.includes('tsx') || - options.extensions.find((ext) => - typeof ext === 'string' ? ext === extension : ext[0] === extension && ext[1].typescript, + options.extensions?.find( + (ext) => typeof ext !== 'string' && ext[0] === extension && ext[1].typescript, ) ) { opts.presets.push([ts, options.typescript || {}]); From 80d4911e1e84960bea617b4c2b0f44f04c78153f Mon Sep 17 00:00:00 2001 From: high1 Date: Mon, 3 Jan 2022 20:41:44 +0100 Subject: [PATCH 4/4] Removed flags parsing --- pnpm-lock.yaml | 62 +++++++++++++++++++++++++++----------------------- src/index.ts | 4 +--- 2 files changed, 34 insertions(+), 32 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 150c064..1800f22 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,24 +11,24 @@ specifiers: '@skypack/package-check': ^0.2.2 '@types/babel__core': ^7.1.16 '@types/node': ^16.11.6 - babel-preset-solid: ^1.2.2 + babel-preset-solid: ^1.2.6 merge-anything: ^4.0.1 prettier: ^2.4.1 rollup: ^2.59.0 rollup-plugin-cleaner: ^1.0.0 - solid-js: ^1.2.2 - solid-refresh: ^0.2.2 + solid-js: ^1.2.6 + solid-refresh: ^0.3.2 typescript: ^4.4.4 - vite: ^2.6.13 + vite: ^2.7.1 dependencies: '@babel/core': 7.16.0 '@babel/preset-typescript': 7.16.0_@babel+core@7.16.0 - babel-preset-solid: 1.2.2_@babel+core@7.16.0 + babel-preset-solid: 1.2.6_@babel+core@7.16.0 merge-anything: 4.0.1 - solid-js: 1.2.2 - solid-refresh: 0.2.2_solid-js@1.2.2 - vite: 2.6.13 + solid-js: 1.2.6 + solid-refresh: 0.3.3_solid-js@1.2.6 + vite: 2.7.10 devDependencies: '@babel/plugin-transform-typescript': 7.16.1_@babel+core@7.16.0 @@ -1283,20 +1283,20 @@ packages: /@types/babel__generator/7.6.3: resolution: {integrity: sha512-/GWCmzJWqV7diQW54smJZzWbSFf4QYtF71WCKhcx6Ru/tFyQIY2eiiITcCAeuPbNSvT9YCGkVMqqvSk2Z0mXiA==} dependencies: - '@babel/types': 7.15.6 + '@babel/types': 7.16.0 dev: true /@types/babel__template/7.4.1: resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} dependencies: '@babel/parser': 7.15.7 - '@babel/types': 7.15.6 + '@babel/types': 7.16.0 dev: true /@types/babel__traverse/7.14.2: resolution: {integrity: sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==} dependencies: - '@babel/types': 7.15.6 + '@babel/types': 7.16.0 dev: true /@types/estree/0.0.39: @@ -1329,8 +1329,8 @@ packages: object.assign: 4.1.2 dev: true - /babel-plugin-jsx-dom-expressions/0.30.5_@babel+core@7.16.0: - resolution: {integrity: sha512-Fvyuyx5ggORiCiwsce9ZKeveZBcjtafPBuse3fL1kVY6yv/EnyFFBaFs4WWx/or4LtrJzEqSFDv83te0M6Zt8g==} + /babel-plugin-jsx-dom-expressions/0.30.9_@babel+core@7.16.0: + resolution: {integrity: sha512-FdfgH5IgB5vUCHGQtj65uZ4uiW42VPN2h2KgRwRkINL9/vHRPw0bsGKL+2CaI/LmLKvot9IXhqjSV/HhD0KDWA==} dependencies: '@babel/helper-module-imports': 7.16.0 '@babel/plugin-syntax-jsx': 7.16.0_@babel+core@7.16.0 @@ -1376,10 +1376,10 @@ packages: - supports-color dev: true - /babel-preset-solid/1.2.2_@babel+core@7.16.0: - resolution: {integrity: sha512-63B6JKX+Sk/XRkbFD7RsZtkhR0/pZ0eSNnbzyQTP4Xsj1NFACeW5XG1ycheQZK+/qhsCuhELjNcqnoIAj8gcsA==} + /babel-preset-solid/1.2.6_@babel+core@7.16.0: + resolution: {integrity: sha512-rFl9Sv/llx5fbE1zfx9QlQMsJz3q/nQZds2xq5Atnayop1NOyK9l/ychF2g3DWXoN9MbAR+ZxZqxzsPnOXAV+A==} dependencies: - babel-plugin-jsx-dom-expressions: 0.30.5_@babel+core@7.16.0 + babel-plugin-jsx-dom-expressions: 0.30.9_@babel+core@7.16.0 transitivePeerDependencies: - '@babel/core' dev: false @@ -1673,6 +1673,7 @@ packages: resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] + requiresBuild: true optional: true /function-bind/1.1.1: @@ -1857,13 +1858,13 @@ packages: engines: {node: '>=8.6'} dev: true - /postcss/8.3.11: - resolution: {integrity: sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==} + /postcss/8.4.5: + resolution: {integrity: sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.1.30 picocolors: 1.0.0 - source-map-js: 0.6.2 + source-map-js: 1.0.1 dev: false /prettier/2.4.1: @@ -1959,20 +1960,23 @@ packages: hasBin: true dev: true - /solid-js/1.2.2: - resolution: {integrity: sha512-2FtxO+bHDzS7RwGUU/aQ36VOX81e3Cf1KE4GzbySrG1huYP51zotjqLqfWbKe89nwPjXQBoxnEK5hnBfDj0O0Q==} + /solid-js/1.2.6: + resolution: {integrity: sha512-NvPHJ5Vj5f+ZJWIioickrC55seovSkDtm5NzSpnoUk3z4tATv0STpy5iuGNEn51ZORUcwpZzrMAtOCGziXU1XA==} dev: false - /solid-refresh/0.2.2_solid-js@1.2.2: - resolution: {integrity: sha512-oQN3pUJ8fBd4ldMxZVqK7S4PGzAn1yx1B5bRRfANoxoqmHyY2QLfzrOzXsYnAkhh272K+W24oKgFWlmdUZ6HtQ==} + /solid-refresh/0.3.3_solid-js@1.2.6: + resolution: {integrity: sha512-8Xi828ErNGAp7FmNNfJTBKy+LdMxnJ1LAAh8CgtPhtaVMBlmppzvD4YSR6UHm8sNsoO5rwTwAl5uHfKsWFFDPA==} peerDependencies: solid-js: ^1.0.0 dependencies: - solid-js: 1.2.2 + '@babel/generator': 7.16.0 + '@babel/helper-module-imports': 7.16.0 + '@babel/types': 7.16.0 + solid-js: 1.2.6 dev: false - /source-map-js/0.6.2: - resolution: {integrity: sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==} + /source-map-js/1.0.1: + resolution: {integrity: sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==} engines: {node: '>=0.10.0'} dev: false @@ -2027,8 +2031,8 @@ packages: engines: {node: '>=4'} dev: true - /vite/2.6.13: - resolution: {integrity: sha512-+tGZ1OxozRirTudl4M3N3UTNJOlxdVo/qBl2IlDEy/ZpTFcskp+k5ncNjayR3bRYTCbqSOFz2JWGN1UmuDMScA==} + /vite/2.7.10: + resolution: {integrity: sha512-KEY96ntXUid1/xJihJbgmLZx7QSC2D4Tui0FdS0Old5OokYzFclcofhtxtjDdGOk/fFpPbHv9yw88+rB93Tb8w==} engines: {node: '>=12.2.0'} hasBin: true peerDependencies: @@ -2044,7 +2048,7 @@ packages: optional: true dependencies: esbuild: 0.13.12 - postcss: 8.3.11 + postcss: 8.4.5 resolve: 1.20.0 rollup: 2.59.0 optionalDependencies: diff --git a/src/index.ts b/src/index.ts index 22a0f45..60ef942 100644 --- a/src/index.ts +++ b/src/index.ts @@ -307,9 +307,7 @@ export default function solidPlugin(options: Partial = {}): Plugin { if (!/\.[jt]sx/.test(id)) { if (options.extensions) { - const extensionWithFlags = getExtension(id); - extension = extensionWithFlags.split('?')[0]; - + extension = getExtension(id); if ( !options.extensions .map((ext) => (typeof ext === 'string' ? ext : ext[0]))