From fa256263c0153907e27e67ab5cc86d73c3026a9a Mon Sep 17 00:00:00 2001 From: Philipp A Date: Fri, 17 Jun 2022 10:16:36 +0200 Subject: [PATCH 1/2] WIP ES imports --- package.json | 1 + rollup.config.ts | 35 +++++++++---------- .../index.d.ts | 9 +++++ yarn.lock | 5 +++ 4 files changed, 31 insertions(+), 19 deletions(-) create mode 100644 typings/rollup-plugin-esm-import-to-url/index.d.ts diff --git a/package.json b/package.json index c5a080e..be75561 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "rollup": "^2.68.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-copy": "^3.3.0", + "rollup-plugin-esm-import-to-url": "^2.1.0", "rollup-plugin-node-builtins": "^2.1.2", "rollup-plugin-postcss-modules": "^2.0.2", "rollup-plugin-serve": "^1.0.4", diff --git a/rollup.config.ts b/rollup.config.ts index de58c16..7821e88 100644 --- a/rollup.config.ts +++ b/rollup.config.ts @@ -4,6 +4,7 @@ import nodeResolve from '@rollup/plugin-node-resolve' import commonjs from '@rollup/plugin-commonjs' import json from '@rollup/plugin-json' import copy from 'rollup-plugin-copy' +import esmImportToUrl from 'rollup-plugin-esm-import-to-url' import analyze from 'rollup-plugin-analyzer' import builtins from 'rollup-plugin-node-builtins' import typescript from '@rollup/plugin-typescript' @@ -54,11 +55,6 @@ function template(options?: RollupHtmlTemplateOptions | undefined): string { .map((input) => ``) .join('\n') - const reactTag = { - production: 'production.min', - development: 'development', - }[getNodeEnv()] - return `\ @@ -67,11 +63,6 @@ function template(options?: RollupHtmlTemplateOptions | undefined): string { ${metas} ${title} - - - - - ${scripts} @@ -86,25 +77,22 @@ ${links} ` } +const reactTag = { + production: 'production.min', + development: 'development', +}[getNodeEnv()] + const conf: RollupOptions = { input: 'src/index.tsx', output: { file: 'dist/bundle.js', - format: 'iife', + format: 'es', sourcemap: true, - globals: { - react: 'React', - 'react-dom': 'ReactDOM', - 'plotly.js': 'Plotly', - 'plotly.js/dist/plotly': 'Plotly', - katex: 'katex', - }, }, treeshake: { moduleSideEffects: false }, watch: { include: ['src/**'], }, - external: ['react', 'react-dom', 'plotly.js', 'plotly.js/dist/plotly', 'katex'], plugins: [ analyze({ writeTo(formatted) { @@ -112,6 +100,15 @@ const conf: RollupOptions = { require('fs').writeFile('dist/bundle.log', formatted, (e: Error) => (e !== null ? console.error(e) : {})) }, }), + esmImportToUrl({ + imports: { + react: `https://unpkg.com/react@18/umd/react.${reactTag}.js`, + 'react-dom': `https://unpkg.com/react-dom@18/umd/react-dom.${reactTag}.js`, + 'plotly.js': 'https://unpkg.com/plotly.js@1/dist/plotly.min.js', + 'plotly.js/dist/plotly': 'https://unpkg.com/plotly.js@1/dist/plotly.min.js', + katex: 'https://unpkg.com/katex@0.12/dist/katex.min.js', + }, + }), postcss({ extract: true, sourceMap: true, diff --git a/typings/rollup-plugin-esm-import-to-url/index.d.ts b/typings/rollup-plugin-esm-import-to-url/index.d.ts new file mode 100644 index 0000000..8001a67 --- /dev/null +++ b/typings/rollup-plugin-esm-import-to-url/index.d.ts @@ -0,0 +1,9 @@ +declare module 'rollup-plugin-esm-import-to-url' { + import { Plugin } from 'rollup' + + export interface ESMImportToURLOptions { + imports?: Record + } + + export default function esmImportToUrl(opts: ESMImportToURLOptions): Plugin +} diff --git a/yarn.lock b/yarn.lock index 512b70f..67dc63c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6843,6 +6843,11 @@ rollup-plugin-copy@^3.3.0: globby "10.0.1" is-plain-object "^3.0.0" +rollup-plugin-esm-import-to-url@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-esm-import-to-url/-/rollup-plugin-esm-import-to-url-2.1.0.tgz#b54519ead4244401a7dd6d21af97c064fc1f2676" + integrity sha512-/OSuqqZTrztz0NC9pcQcsEqEn5iQXYauFluh6CBSkRtNW4q6CTCxEsOAZFWTxizF2RKk9ZvaztlBBr/FuuWbwg== + rollup-plugin-node-builtins@^2.1.2: version "2.1.2" resolved "https://registry.npmjs.org/rollup-plugin-node-builtins/-/rollup-plugin-node-builtins-2.1.2.tgz" From 9190a8a2a12523206506010fd7cc6074339da140 Mon Sep 17 00:00:00 2001 From: Philipp A Date: Wed, 27 Jul 2022 11:27:12 +0200 Subject: [PATCH 2/2] esm.sh --- rollup.config.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/rollup.config.ts b/rollup.config.ts index 7821e88..7bae17d 100644 --- a/rollup.config.ts +++ b/rollup.config.ts @@ -65,7 +65,7 @@ ${metas} ${scripts} - + ${links} @@ -77,10 +77,12 @@ ${links} ` } +/* const reactTag = { production: 'production.min', development: 'development', }[getNodeEnv()] +*/ const conf: RollupOptions = { input: 'src/index.tsx', @@ -102,11 +104,11 @@ const conf: RollupOptions = { }), esmImportToUrl({ imports: { - react: `https://unpkg.com/react@18/umd/react.${reactTag}.js`, - 'react-dom': `https://unpkg.com/react-dom@18/umd/react-dom.${reactTag}.js`, - 'plotly.js': 'https://unpkg.com/plotly.js@1/dist/plotly.min.js', - 'plotly.js/dist/plotly': 'https://unpkg.com/plotly.js@1/dist/plotly.min.js', - katex: 'https://unpkg.com/katex@0.12/dist/katex.min.js', + react: 'https://esm.sh/react@18?target=es2020', + 'react-dom': 'https://esm.sh/react-dom@18?target=es2020', + 'plotly.js': 'https://esm.sh/plotly.js@1?target=es2020', + 'plotly.js/dist/plotly': 'https://esm.sh/plotly.js@1?target=es2020', + katex: 'https://esm.sh/katex@0.12?target=es2020', }, }), postcss({