Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(suite): add option to have vite as a dev server
- Loading branch information
1 parent
52db480
commit ff1fe99
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <!doctype html> | ||
| <html lang="en" translate="no"> | ||
| <head> | ||
| <title>Trezor Suite</title> | ||
| <meta name="google" content="notranslate" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <meta charset="utf-8" /> | ||
|
|
||
| <link media="all" rel="stylesheet" href="/static/fonts/fonts.css" /> | ||
| <link rel="icon" href="/static/images/favicons/favicon.png" /> | ||
| <link rel="apple-touch-icon" href="/static/images/favicons/favicon.png" /> | ||
| <script type="text/javascript"> | ||
| if (localStorage.getItem('translation_mode') === 'true') { | ||
| console.warn('INJECTING CROWDIN IN-CONTEXT'); | ||
| var _jipt = []; | ||
| _jipt.push(['project', 'trezor-suite']); | ||
| _jipt.push([ | ||
| 'escape', | ||
| function () { | ||
| localStorage.removeItem('translation_mode'); | ||
| window.location.reload(); | ||
| }, | ||
| ]); | ||
| var script = document.createElement('script'); | ||
| script.setAttribute('src', '//cdn.crowdin.com/jipt/jipt.js'); | ||
| document.head.prepend(script); | ||
| } | ||
|
|
||
| // set favicon according to current system theme | ||
| function si(event) { | ||
| var isDM = event.matches; // isDarkMode | ||
| var i = document.querySelector('link[rel=icon]'); | ||
| var ai = document.querySelector('link[rel=apple-touch-icon]'); | ||
|
|
||
| if (isDM) { | ||
| i.setAttribute('href', '/static/images/favicons/favicon_dm.png'); | ||
| ai.setAttribute('href', '/static/images/favicons/favicon_dm.png'); | ||
| } else { | ||
| i.setAttribute('href', '/static/images/favicons/favicon.png'); | ||
| ai.setAttribute('href', '/static/images/favicons/favicon.png'); | ||
| } | ||
| } | ||
|
|
||
| if (window.matchMedia) { | ||
| var _mm = window.matchMedia('(prefers-color-scheme: dark)'); | ||
|
|
||
| // not supported in IE | ||
| if (_mm.addEventListener) { | ||
| _mm.addEventListener('change', si); | ||
| } | ||
|
|
||
| si(_mm); | ||
| } | ||
| </script> | ||
| <script type="module" src="./src/vite-index.ts"></script> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| </body> | ||
| </html> |
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,14 @@ | ||
| /* | ||
| * On the start of the app, the index.html file is without div with id="app" to which React app should be rendered. | ||
| * This div is added thanks to browser detection plugin in case that a user uses supported browser. | ||
| * After the div is added, MutationObserver detects the change and adds React app to the DOM. | ||
| */ | ||
|
|
||
| const appElement = document.getElementById('app'); | ||
| if (appElement) { | ||
| import(/* webpackChunkName: "app" */ './Main') | ||
| .then(comp => comp.init(appElement)) | ||
| .catch(err => console.error(err)); // Fatal error | ||
| } | ||
|
|
||
| export {}; |
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,180 @@ | ||
| import { viteCommonjs } from '@originjs/vite-plugin-commonjs'; | ||
| import react from '@vitejs/plugin-react'; | ||
| import { execSync } from 'child_process'; | ||
| import { readdirSync } from 'fs'; | ||
| import { resolve } from 'path'; | ||
| import { Plugin, ViteDevServer, defineConfig } from 'vite'; | ||
| import { nodePolyfills } from 'vite-plugin-node-polyfills'; | ||
| import wasm from 'vite-plugin-wasm'; | ||
|
|
||
| import { suiteVersion } from '../suite/package.json'; | ||
| import { assetPrefix, project } from '../suite-build/utils/env'; | ||
|
|
||
| // Plugin to serve static files with /static prefix | ||
| const staticAliasPlugin = (): Plugin => ({ | ||
| name: 'static-alias', | ||
| configureServer(server: ViteDevServer) { | ||
| // Middleware to handle /static requests | ||
| server.middlewares.use((req, res, next) => { | ||
| if (req.url?.startsWith('/static/')) { | ||
| // Rewrite the URL to access the file from the public directory | ||
| req.url = req.url.replace('/static/', '/'); | ||
| } | ||
| next(); | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| // Plugin to serve core.js in dev mode | ||
|
|
||
| // Plugin to handle workers similar to webpack's worker-loader | ||
| const workerPlugin = (): Plugin => ({ | ||
| name: 'worker-loader', | ||
| transform(code, id) { | ||
| if (/\/workers\/[^/]+\/index\.ts$/.test(id)) { | ||
| // Return a virtual module that creates a web worker | ||
| return { | ||
| code: ` | ||
| const worker = () => new Worker(new URL('${id}', import.meta.url), { type: 'module' }); | ||
| export default worker; | ||
| `, | ||
| map: null, | ||
| }; | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
| const serveCorePlugin = () => ({ | ||
| name: 'serve-core', | ||
| configureServer(server: ViteDevServer) { | ||
| server.middlewares.use(async (req, res, next) => { | ||
| if (req.url?.endsWith('/js/core.js')) { | ||
| const code = await server.transformRequest( | ||
| resolve(__dirname, '../connect/src/core/index.ts'), | ||
| { ssr: false }, | ||
| ); | ||
| if (code?.code) { | ||
| res.setHeader('Content-Type', 'application/javascript'); | ||
| res.end(code.code); | ||
|
|
||
| return; | ||
| } | ||
| } | ||
| next(); | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| // This helper creates aliases for all workspace packages | ||
| const createWorkspaceAliases = () => { | ||
| const suiteCommonAliases = Object.fromEntries( | ||
| readdirSync(resolve(__dirname, '../../suite-common'), { withFileTypes: true }) | ||
| .filter(dirent => dirent.isDirectory()) | ||
| .map(dirent => [ | ||
| `@suite-common/${dirent.name}`, | ||
| resolve(__dirname, '../../suite-common', dirent.name), | ||
| ]), | ||
| ); | ||
|
|
||
| const trezorPackagesAliases = Object.fromEntries( | ||
| readdirSync(resolve(__dirname, '../'), { withFileTypes: true }) | ||
| .filter(dirent => dirent.isDirectory() && dirent.name !== 'suite-web') | ||
| .map(dirent => [`@trezor/${dirent.name}`, resolve(__dirname, '../', dirent.name)]), | ||
| ); | ||
|
|
||
| return { | ||
| ...suiteCommonAliases, | ||
| ...trezorPackagesAliases, | ||
| }; | ||
| }; | ||
|
|
||
| const commitId = execSync('git rev-parse HEAD').toString().trim(); | ||
|
|
||
| export default defineConfig({ | ||
| root: '.', | ||
| base: assetPrefix, | ||
| // Use suite-data/files as the public directory | ||
| publicDir: resolve(__dirname, '../suite-data/files'), | ||
| plugins: [ | ||
| nodePolyfills(), | ||
| staticAliasPlugin(), | ||
| serveCorePlugin(), | ||
| viteCommonjs(), | ||
| workerPlugin(), | ||
| wasm(), | ||
| react({ | ||
| babel: { | ||
| plugins: [ | ||
| [ | ||
| 'babel-plugin-styled-components', | ||
| { | ||
| displayName: true, | ||
| fileName: false, | ||
| }, | ||
| ], | ||
| ], | ||
| }, | ||
| }), | ||
| ], | ||
| resolve: { | ||
| alias: [ | ||
| { | ||
| find: /^@trezor\/connect(\/index)?$/, | ||
| replacement: '@trezor/connect-web/src/module', | ||
| }, | ||
| { | ||
| find: 'src', | ||
| replacement: resolve(__dirname, '../suite/src'), | ||
| }, | ||
| ...Object.entries(createWorkspaceAliases()).map(([find, replacement]) => ({ | ||
| find, | ||
| replacement, | ||
| })), | ||
| ], | ||
| preserveSymlinks: true, | ||
| }, | ||
| define: { | ||
| 'process.browser': true, | ||
| 'process.env.VERSION': JSON.stringify(suiteVersion), | ||
| 'process.env.COMMIT_HASH': JSON.stringify(commitId), | ||
| 'process.env.COMMITHASH': JSON.stringify(commitId), | ||
| 'process.env.SUITE_TYPE': JSON.stringify(project), | ||
| 'process.env.NODE_ENV': JSON.stringify('development'), | ||
| 'process.env.ASSET_PREFIX': JSON.stringify(assetPrefix), | ||
| __DEV__: true, | ||
| ENABLE_REDUX_LOGGER: true, | ||
| }, | ||
| optimizeDeps: { | ||
| include: ['@trezor/connect', '@trezor/suite', 'buffer'], | ||
| exclude: [ | ||
| // Exclude WebAssembly modules | ||
| '@trezor/crypto-utils', | ||
| '@trezor/utxo-lib', | ||
| ], | ||
| esbuildOptions: { | ||
| define: { | ||
| global: 'globalThis', | ||
| }, | ||
| plugins: [ | ||
| { | ||
| name: 'commonjs', | ||
| setup(build) { | ||
| build.onLoad({ filter: /\.js$/ }, args => { | ||
| if (args.path.includes('packages/')) { | ||
| return { | ||
| format: 'cjs', | ||
| loader: 'js', | ||
| }; | ||
| } | ||
| }); | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| server: { | ||
| port: 8000, | ||
| open: true, | ||
| host: true, | ||
| }, | ||
| }); | ||
Oops, something went wrong.