-
Notifications
You must be signed in to change notification settings - Fork 187
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#2411 Move to vite from react-app-rewired for example project develop…
…ment build (#2487) * #2411 - Add new Vite based command to example for development * #2411 - Add icons to entry html * #2411 - Ignore dist/index.css * #2411 - Fix dropdown icon of tool to show * #2411 - Fix class variable members being assigned `undefined` when initialization * #2411 - Fix uncaught referenceError - cannot access 'clientX' before initialization * #2411 - Eject webpack env to vite * #2411 - Replace CommonJS with ESM * #2411 - Add dev tsconfig for ketcher-core TS intelliSense * #2411 - Refactor customResolver to resolve same aliases from different packages * #2411 - Update Vite entry to public/index.html * #2411 - Fix dist files not containing index.d.ts * #2411 - Ignore warning which shouldn't be warned * #2411 - Fix duplicated imports * #2411 - Add paths to tsconfig to enable ketcher-core TS intelliSense * Revert "#2411 - Fix duplicated imports" This reverts commit 0a0c451. * Revert "#2411 - Replace CommonJS with ESM" This reverts commit 52acf6d. * #2411 - Replace commonJS with dynamic ESM * Revert "#2411 - Replace commonJS with dynamic ESM" This reverts commit ad5577a. * #2411 - Replace commonjs with dynamic ESM * #2411 - Fix missing CSS source file warning * #2411 - Add comment to vite alias config * #2411 - Upgrade Vite to 4.3.1 * #2411 - Update Vite to new patch version
- Loading branch information
Showing
14 changed files
with
1,866 additions
and
308 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| import replace from '@rollup/plugin-replace' | ||
| import react from '@vitejs/plugin-react' | ||
| import { resolve } from 'path' | ||
| import { createLogger, defineConfig, loadEnv } from 'vite' | ||
| import { createHtmlPlugin } from 'vite-plugin-html' | ||
| import vitePluginRaw from 'vite-plugin-raw' | ||
| import svgr from 'vite-plugin-svgr' | ||
| import ketcherCoreTSConfig from '../packages/ketcher-core/tsconfig.json' | ||
| import { valuesToReplace as polymerEditorValues } from '../packages/ketcher-polymer-editor-react/rollup.config' | ||
| import polymerEditorTSConfig from '../packages/ketcher-polymer-editor-react/tsconfig.json' | ||
| import { valuesToReplace as ketcherReactValues } from '../packages/ketcher-react/rollup.config' | ||
| import ketcherReactTSConfig from '../packages/ketcher-react/tsconfig.json' | ||
| import ketcherStandaloneTSConfig from '../packages/ketcher-standalone/tsconfig.json' | ||
| import { envVariables as exampleEnv } from './config/webpack.config' | ||
|
|
||
| const dotEnv = loadEnv('development', '.', '') | ||
| Object.assign(process.env, dotEnv, exampleEnv) | ||
|
|
||
| /** | ||
| * To resolve alias in the range of the specific package, | ||
| * notice that it can't be an arrow function, | ||
| * see: https://github.com/rollup/plugins/blob/master/packages/alias/src/index.ts | ||
| */ | ||
| function resolver(source, importer, options) { | ||
| const packageName = importer.match(/packages\/(.*?)\//)[1] | ||
| const updatedId = source.replace('%packageName%', packageName) | ||
|
|
||
| return this.resolve( | ||
| updatedId, | ||
| importer, | ||
| Object.assign({ skipSelf: true }, options) | ||
| ).then((resolved) => resolved || { id: updatedId }) | ||
| } | ||
|
|
||
| const getTSConfigByPackage = (packageName) => { | ||
| return { | ||
| 'ketcher-core': ketcherCoreTSConfig, | ||
| 'ketcher-polymer-editor-react': polymerEditorTSConfig, | ||
| 'ketcher-react': ketcherReactTSConfig, | ||
| 'ketcher-standalone': ketcherStandaloneTSConfig | ||
| }[packageName] | ||
| } | ||
|
|
||
| const getAliasesByPackage = (packageName) => { | ||
| const aliases = getTSConfigByPackage(packageName).compilerOptions.paths || [] | ||
| return Object.keys(aliases).map((alias) => { | ||
| const find = alias.replace('/*', '') | ||
| return { | ||
| find, | ||
| replacement: resolve(__dirname, `../packages/%packageName%/src/${find}`), | ||
| customResolver: resolver | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| const HtmlReplaceVitePlugin = () => { | ||
| return { | ||
| name: 'ketcher-html-transform', | ||
| transformIndexHtml(html) { | ||
| return html | ||
| .replaceAll('%PUBLIC_URL%/', process.env.PUBLIC_URL) | ||
| .replaceAll( | ||
| '@@version', | ||
| JSON.parse(ketcherReactValues['process.env.HELP_LINK']).split( | ||
| '-' | ||
| )[0] + ' (Vite)' | ||
| ) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const logger = createLogger() | ||
| const loggerWarn = logger.warn | ||
| logger.warn = (msg, options) => { | ||
| if ( | ||
| // This warning occurs when entry html is not at the root path | ||
| msg.includes('files in the public directory are served at the root path.') | ||
| ) { | ||
| return | ||
| } | ||
| loggerWarn(msg, options) | ||
| } | ||
|
|
||
| export default defineConfig({ | ||
| server: { | ||
| open: true | ||
| }, | ||
| esbuild: { | ||
| tsconfigRaw: { | ||
| compilerOptions: { | ||
| // doc: https://vitejs.dev/guide/features.html#usedefineforclassfields | ||
| useDefineForClassFields: false | ||
| } | ||
| } | ||
| }, | ||
| css: { | ||
| devSourcemap: true | ||
| }, | ||
| plugins: [ | ||
| react(), | ||
| svgr({ | ||
| exportAsDefault: true | ||
| }), | ||
| vitePluginRaw({ | ||
| match: /\.sdf/ | ||
| }), | ||
| replace({ | ||
| include: '**/ketcher-react/src/**', | ||
| preventAssignment: true, | ||
| values: ketcherReactValues | ||
| }), | ||
| replace({ | ||
| include: '**/ketcher-polymer-editor-react/src/**', | ||
| preventAssignment: true, | ||
| values: polymerEditorValues | ||
| }), | ||
| replace({ | ||
| include: '**/example/src/**', | ||
| preventAssignment: true, | ||
| values: { | ||
| require: 'await import' | ||
| } | ||
| }), | ||
| createHtmlPlugin({ | ||
| entry: '/src/index.tsx', | ||
| template: 'public/index.html', | ||
| inject: { | ||
| tags: [ | ||
| { | ||
| /** | ||
| * HACK: https://github.com/bevacqua/dragula/issues/602#issuecomment-1109840139 | ||
| * Fix: global is not defined | ||
| */ | ||
| injectTo: 'body', | ||
| tag: 'script', | ||
| children: 'var global = global || window' | ||
| } | ||
| ] | ||
| } | ||
| }), | ||
| HtmlReplaceVitePlugin() | ||
| ], | ||
| define: { | ||
| 'process.env': process.env | ||
| }, | ||
| resolve: { | ||
| alias: [ | ||
| { | ||
| // HACK: to ignore dist/index.css, you can set any file as replacement | ||
| find: 'ketcher-react/dist/index.css', | ||
| replacement: resolve( | ||
| __dirname, | ||
| '../packages/ketcher-react/src/index.less' | ||
| ) | ||
| }, | ||
| { | ||
| find: 'ketcher-react', | ||
| replacement: resolve( | ||
| __dirname, | ||
| '../packages/ketcher-react/src/index.tsx' | ||
| ) | ||
| }, | ||
| { | ||
| find: 'ketcher-core', | ||
| replacement: resolve(__dirname, '../packages/ketcher-core/src/index.ts') | ||
| }, | ||
| { | ||
| find: 'ketcher-standalone', | ||
| replacement: resolve( | ||
| __dirname, | ||
| '../packages/ketcher-standalone/src/index.ts' | ||
| ) | ||
| }, | ||
| { | ||
| find: 'ketcher-polymer-editor-react', | ||
| replacement: resolve( | ||
| __dirname, | ||
| '../packages/ketcher-polymer-editor-react/src/index.tsx' | ||
| ) | ||
| }, | ||
|
|
||
| /** Get aliases from packages' tsconfig.json */ | ||
| ...getAliasesByPackage('ketcher-core'), | ||
| ...getAliasesByPackage('ketcher-react'), | ||
| ...getAliasesByPackage('ketcher-polymer-editor-react'), | ||
| ...getAliasesByPackage('ketcher-standalone'), | ||
| { | ||
| find: 'src', // every package has this implicit alias | ||
| replacement: resolve(__dirname, `../packages/%packageName%/src`), | ||
| customResolver: resolver | ||
| }, | ||
|
|
||
| /** Web worker in ketcher-standalone */ | ||
| { | ||
| find: 'web-worker:./indigoWorker', | ||
| replacement: './indigoWorker?worker' | ||
| } | ||
| ] | ||
| }, | ||
| customLogger: logger | ||
| }) |
Oops, something went wrong.