From fd746e6735c84ea51ddcd686b17be0ad7c91bd40 Mon Sep 17 00:00:00 2001 From: alexandre mouton-brady Date: Sat, 28 Aug 2021 09:15:16 +0000 Subject: [PATCH] :sparkles: Adding opt-in @babel/preset-typescript options --- README.md | 11 +++- playground/pages/index.tsx | 3 +- playground/vite.config.js | 1 + src/index.ts | 122 ++++++++++++++++++++++++++++++++++++- 4 files changed, 132 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f079bcb..97c0a45 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Join [solid discord](https://discord.com/invite/solidjs) and check the [troubles ## Requirements -We've recently made this module 100% esm compatible. As per [this document](https://nodejs.org/api/esm.html) it is strongly recommended to have at least version `14.13.0` of node installed. +This module 100% esm compatible. As per [this document](https://nodejs.org/api/esm.html) it is strongly recommended to have at least the version `14.13.0` of node installed. You can check your current version of node by typing `node -v` in your terminal. If your version is below that one version I'd encourage you to either do an update globally or use a node version management tool such as [volta](https://volta.sh/) or [nvm](https://github.com/nvm-sh/nvm). @@ -129,6 +129,13 @@ Pass any additional [babel transform options](https://babeljs.io/docs/en/options Pass any additional [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions#plugin-options). 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). +#### options.typescript + +- Type: [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript) +- Default: {} + +Pass any additional [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript). + ## Note on HMR Starting from version `1.1.0`, this plugin handle automatic HMR via [solid-refresh](https://github.com/solidjs/solid-refresh). @@ -165,6 +172,8 @@ if (import.meta.hot) { - If one of your dependency spit out React code instead of Solid that means that they don't expose JSX properly. To get around it, you might want to manually exclude it from the [dependencies optimization](https://vitejs.dev/config/#optimizedeps-exclude) +- If you are trying to make [directives](https://www.solidjs.com/docs/latest/api#use%3A___) work and they somehow don't try setting the `options.typescript.onlyRemoveTypeImports` option to `true` + ## Migration from v1 The master branch now target vite 2. diff --git a/playground/pages/index.tsx b/playground/pages/index.tsx index 27227ef..9fe0e52 100644 --- a/playground/pages/index.tsx +++ b/playground/pages/index.tsx @@ -1,5 +1,4 @@ -import { createRenderEffect, createSignal } from 'solid-js'; -import type { Accessor } from 'solid-js'; +import { Accessor, createRenderEffect, createSignal } from 'solid-js'; function model( element: HTMLInputElement, diff --git a/playground/vite.config.js b/playground/vite.config.js index 83811ac..aec834a 100644 --- a/playground/vite.config.js +++ b/playground/vite.config.js @@ -2,6 +2,7 @@ import solid from 'vite-plugin-solid'; import { defineConfig } from 'vite'; export default defineConfig({ + target: 'esnext', plugins: [ solid({ babel: { diff --git a/src/index.ts b/src/index.ts index a517277..a319c71 100644 --- a/src/index.ts +++ b/src/index.ts @@ -47,6 +47,125 @@ export interface Options { | TransformOptions | ((source: string, id: string, ssr: boolean) => TransformOptions) | ((source: string, id: string, ssr: boolean) => Promise); + typescript: { + /** + * Forcibly enables jsx parsing. Otherwise angle brackets will be treated as + * typescript's legacy type assertion var foo = bar;. Also, isTSX: + * true requires allExtensions: true. + * + * @default false + */ + isTSX?: boolean; + + /** + * Replace the function used when compiling JSX expressions. This is so that + * we know that the import is not a type import, and should not be removed. + * + * @default React + */ + jsxPragma?: string; + + /** + * Replace the function used when compiling JSX fragment expressions. This + * is so that we know that the import is not a type import, and should not + * be removed. + * + * @default React.Fragment + */ + jsxPragmaFrag?: string; + + /** + * Indicates that every file should be parsed as TS or TSX (depending on the + * isTSX option). + * + * @default false + */ + allExtensions?: boolean; + + /** + * Enables compilation of TypeScript namespaces. + * + * @default uses the default set by @babel/plugin-transform-typescript. + */ + allowNamespaces?: boolean; + + /** + * When enabled, type-only class fields are only removed if they are + * prefixed with the declare modifier: + * + * > NOTE: This will be enabled by default in Babel 8 + * + * @default false + * + * @example + * ```ts + * class A { + * declare foo: string; // Removed + * bar: string; // Initialized to undefined + * prop?: string; // Initialized to undefined + * prop1!: string // Initialized to undefined + * } + * ``` + */ + allowDeclareFields?: boolean; + + /** + * When set to true, the transform will only remove type-only imports + * (introduced in TypeScript 3.8). This should only be used if you are using + * TypeScript >= 3.8. + * + * @default false + */ + onlyRemoveTypeImports?: boolean; + + /** + * When set to true, Babel will inline enum values rather than using the + * usual enum output: + * + * This option differs from TypeScript's --isolatedModules behavior, which + * ignores the const modifier and compiles them as normal enums, and aligns + * Babel's behavior with TypeScript's default behavior. + * + * ```ts + * // Input + * const enum Animals { + * Fish + * } + * console.log(Animals.Fish); + * + * // Default output + * var Animals; + * + * (function (Animals) { + * Animals[Animals["Fish"] = 0] = "Fish"; + * })(Animals || (Animals = {})); + * + * console.log(Animals.Fish); + * + * // `optimizeConstEnums` output + * console.log(0); + * ``` + * + * However, when exporting a const enum Babel will compile it to a plain + * object literal so that it doesn't need to rely on cross-file analysis + * when compiling it: + * + * ```ts + * // Input + * export const enum Animals { + * Fish, + * } + * + * // `optimizeConstEnums` output + * export var Animals = { + * Fish: 0, + * }; + * ``` + * + * @default false + */ + optimizeConstEnums?: boolean; + }; /** * Pass any additional [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions#plugin-options). * 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). @@ -187,8 +306,7 @@ export default function solidPlugin(options: Partial = {}): Plugin { }; if (id.includes('tsx')) { - // The `onlyRemoveTypeImports` prevent directives from failing - opts.presets.push([ts, { onlyRemoveTypeImports: true }]); + opts.presets.push([ts, options.typescript || {}]); } // Default value for babel user options