Skip to content

Commit

Permalink
fix(vite): Link app to core source files during dev
Browse files Browse the repository at this point in the history 
Enabling the ideal dev experience where linked app packages such as `core`, `amazon` etc
are treated as source files by `vite` instead of relying on the package specific build
output.

Also adding `react-refresh` and `svgr` plugins to enable HMR, SVG imports.
  • Loading branch information
@vigneshm
vigneshm committed Jul 30, 2021
1 parent bf380cf commit 37bf5f9
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 8 deletions.
2 changes: 2 additions & 0 deletions app/scripts/modules/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"@types/webpack-env": "1.13.7",
"@typescript-eslint/eslint-plugin": "4.1.0",
"@typescript-eslint/parser": "4.1.0",
"@vitejs/plugin-react-refresh": "^1.3.6",
"autoprefixer": "7.1.2",
"babel-loader": "8.1.0",
"cache-loader": "2.0.1",
Expand Down Expand Up @@ -75,6 +76,7 @@
"typescript": "4.0.2",
"vite": "2.4.2",
"vite-plugin-html-config": "^1.0.5",
"vite-plugin-svgr": "^0.3.0",
"webpack": "4.44.2",
"webpack-cli": "3.3.12",
"webpack-dev-server": "3.11.0"
Expand Down
41 changes: 34 additions & 7 deletions app/scripts/modules/app/vite.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import reactRefresh from '@vitejs/plugin-react-refresh';
import dotenv from 'dotenv';
import fs from 'fs';
import path from 'path';
import strip from 'rollup-plugin-strip-code';
import { defineConfig } from 'vite';
import htmlConfigPlugin from 'vite-plugin-html-config';
import svgr from 'vite-plugin-svgr';

import angularTemplateLoader from '@spinnaker/scripts/helpers/rollup-plugin-angularjs-template-loader';

Expand All @@ -18,9 +20,39 @@ if (fs.existsSync(envLocalFilePath)) {
}

export default defineConfig(({ command }) => {
const alias = [
{ find: 'root', replacement: DECK_ROOT },
{
find: 'coreImports',
replacement: `${NODE_MODULE_PATH}/@spinnaker/core/src/presentation/less/imports/commonImports.less`,
},
];

if (command === 'serve') {
// During development directly use source files from linked packages rather than build output.
alias.push({
find: '@spinnaker/core',
replacement: `${DECK_ROOT}/packages/core/src/index.ts`,
});
}
return {
clearScreen: false,
// `vite` has a depdendency optimization step where it pre-bundles the dependencies using esbuild and directly
// serves the source files. When `vite` encounters linked packages, it doesn't include them in the pre-bundle and
// instead treats them as source files. However (not sure it is intentional or a bug), it still runs esbuild across
// the linked package source files (for building the module graph?). This is an issue when we have custom loaders
// defined as rollup plugins since this will not be used in this step.
// So fixing the issue by making esbuild load .html files as text files (which is ok since it doesn't affect the
// output) and later use rollup to actually load/transform the file.
optimizeDeps: {
esbuildOptions: {
loader: {
'.html': 'text',
},
},
},
plugins: [
reactRefresh(),
htmlConfigPlugin(
command === 'build' ? { favicon: 'icons/prod-favicon.ico' } : { favicon: 'icons/dev-favicon.ico' },
),
Expand All @@ -32,15 +64,10 @@ export default defineConfig(({ command }) => {
),
}),
angularTemplateLoader({ sourceMap: true }),
svgr(),
],
resolve: {
alias: [
{ find: 'root', replacement: DECK_ROOT },
{
find: 'coreImports',
replacement: `${NODE_MODULE_PATH}/@spinnaker/core/src/presentation/less/imports/commonImports.less`,
},
],
alias,
mainFields: ['module', 'jsnext:main', 'jsnext', 'main:esnext'],
},
server: {
Expand Down
7 changes: 6 additions & 1 deletion packages/scripts/helpers/rollup-plugin-angularjs-template-loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,17 @@ module.exports = function angularJsTemplateLoader(options = {}) {
}

return {
name: 'angularJSTemplateLoader',
transform(originalCode, id) {
let code = originalCode;
const templateRegex = /require\(['"]([^'"]+\.html)['"]\)/g;

// look for things like require('./template.html')
if ((!code.includes("require('") && !code.includes(`require("`)) || id.includes('node_modules')) {
if (
(!code.includes("require('") && !code.includes(`require("`)) ||
id.includes('node_modules') ||
id.includes('react-refresh')
) {
return;
}

Expand Down
138 changes: 138 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,27 @@
semver "^6.3.0"
source-map "^0.5.0"

"@babel/core@^7.14.8":
version "7.14.8"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.8.tgz#20cdf7c84b5d86d83fac8710a8bc605a7ba3f010"
integrity sha512-/AtaeEhT6ErpDhInbXmjHcUQXH0L0TEgscfcxk1qbOvLuKCa5aZT0SOOtDKFY96/CLROwbLSKyFor6idgNaU4Q==
dependencies:
"@babel/code-frame" "^7.14.5"
"@babel/generator" "^7.14.8"
"@babel/helper-compilation-targets" "^7.14.5"
"@babel/helper-module-transforms" "^7.14.8"
"@babel/helpers" "^7.14.8"
"@babel/parser" "^7.14.8"
"@babel/template" "^7.14.5"
"@babel/traverse" "^7.14.8"
"@babel/types" "^7.14.8"
convert-source-map "^1.7.0"
debug "^4.1.0"
gensync "^1.0.0-beta.2"
json5 "^2.1.2"
semver "^6.3.0"
source-map "^0.5.0"

"@babel/generator@^7.12.13", "@babel/generator@^7.14.5", "@babel/generator@^7.5.0":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.5.tgz#848d7b9f031caca9d0cd0af01b063f226f52d785"
Expand All @@ -145,6 +166,15 @@
jsesc "^2.5.1"
source-map "^0.5.0"

"@babel/generator@^7.14.8":
version "7.14.8"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.8.tgz#bf86fd6af96cf3b74395a8ca409515f89423e070"
integrity sha512-cYDUpvIzhBVnMzRoY1fkSEhK/HmwEVwlyULYgn/tMQYd6Obag3ylCjONle3gdErfXBW61SVTlR9QR7uWlgeIkg==
dependencies:
"@babel/types" "^7.14.8"
jsesc "^2.5.1"
source-map "^0.5.0"

"@babel/generator@^7.8.6":
version "7.8.8"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.8.tgz#cdcd58caab730834cee9eeadb729e833b625da3e"
Expand Down Expand Up @@ -396,6 +426,20 @@
"@babel/traverse" "^7.14.5"
"@babel/types" "^7.14.5"

"@babel/helper-module-transforms@^7.14.8":
version "7.14.8"
resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.8.tgz#d4279f7e3fd5f4d5d342d833af36d4dd87d7dc49"
integrity sha512-RyE+NFOjXn5A9YU1dkpeBaduagTlZ0+fccnIcAGbv1KGUlReBj7utF7oEth8IdIBQPcux0DDgW5MFBH2xu9KcA==
dependencies:
"@babel/helper-module-imports" "^7.14.5"
"@babel/helper-replace-supers" "^7.14.5"
"@babel/helper-simple-access" "^7.14.8"
"@babel/helper-split-export-declaration" "^7.14.5"
"@babel/helper-validator-identifier" "^7.14.8"
"@babel/template" "^7.14.5"
"@babel/traverse" "^7.14.8"
"@babel/types" "^7.14.8"

"@babel/helper-module-transforms@^7.9.0":
version "7.9.0"
resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
Expand Down Expand Up @@ -497,6 +541,13 @@
dependencies:
"@babel/types" "^7.14.5"

"@babel/helper-simple-access@^7.14.8":
version "7.14.8"
resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz#82e1fec0644a7e775c74d305f212c39f8fe73924"
integrity sha512-TrFN4RHh9gnWEU+s7JloIho2T76GPwRHhdzOWLqTrMnlas8T9O7ec+oEDNsRXndOmru9ymH9DFrEOxpzPoSbdg==
dependencies:
"@babel/types" "^7.14.8"

"@babel/helper-simple-access@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
Expand Down Expand Up @@ -548,6 +599,11 @@
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==

"@babel/helper-validator-identifier@^7.14.8":
version "7.14.8"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz#32be33a756f29e278a0d644fa08a2c9e0f88a34c"
integrity sha512-ZGy6/XQjllhYQrNw/3zfWRwZCTVSiBLZ9DHVZxn9n2gip/7ab8mv2TWlKPIBk26RwedCBoWdjLmn+t9na2Gcow==

"@babel/helper-validator-identifier@^7.9.5":
version "7.9.5"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
Expand Down Expand Up @@ -587,6 +643,15 @@
"@babel/traverse" "^7.14.5"
"@babel/types" "^7.14.5"

"@babel/helpers@^7.14.8":
version "7.14.8"
resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.8.tgz#839f88f463025886cff7f85a35297007e2da1b77"
integrity sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==
dependencies:
"@babel/template" "^7.14.5"
"@babel/traverse" "^7.14.8"
"@babel/types" "^7.14.8"

"@babel/helpers@^7.9.6":
version "7.9.6"
resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.6.tgz#092c774743471d0bb6c7de3ad465ab3d3486d580"
Expand Down Expand Up @@ -656,6 +721,11 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.13.tgz#42f03862f4aed50461e543270916b47dd501f0df"
integrity sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==

"@babel/parser@^7.14.8":
version "7.14.8"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4"
integrity sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA==

"@babel/parser@^7.8.6":
version "7.8.8"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.8.tgz#4c3b7ce36db37e0629be1f0d50a571d2f86f6cd4"
Expand Down Expand Up @@ -1414,6 +1484,20 @@
dependencies:
"@babel/plugin-transform-react-jsx" "^7.14.5"

"@babel/plugin-transform-react-jsx-self@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz#703b5d1edccd342179c2a99ee8c7065c2b4403cc"
integrity sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==
dependencies:
"@babel/helper-plugin-utils" "^7.14.5"

"@babel/plugin-transform-react-jsx-source@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz#79f728e60e6dbd31a2b860b0bf6c9765918acf1d"
integrity sha512-1TpSDnD9XR/rQ2tzunBVPThF5poaYT9GqP+of8fAtguYuI/dm2RkrMBDemsxtY0XBzvW7nXjYM0hRyKX9QYj7Q==
dependencies:
"@babel/helper-plugin-utils" "^7.14.5"

"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz#39749f0ee1efd8a1bd729152cf5f78f1d247a44a"
Expand Down Expand Up @@ -1842,6 +1926,21 @@
debug "^4.1.0"
globals "^11.1.0"

"@babel/traverse@^7.14.8":
version "7.14.8"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.8.tgz#c0253f02677c5de1a8ff9df6b0aacbec7da1a8ce"
integrity sha512-kexHhzCljJcFNn1KYAQ6A5wxMRzq9ebYpEDV4+WdNyr3i7O44tanbDOR/xjiG2F3sllan+LgwK+7OMk0EmydHg==
dependencies:
"@babel/code-frame" "^7.14.5"
"@babel/generator" "^7.14.8"
"@babel/helper-function-name" "^7.14.5"
"@babel/helper-hoist-variables" "^7.14.5"
"@babel/helper-split-export-declaration" "^7.14.5"
"@babel/parser" "^7.14.8"
"@babel/types" "^7.14.8"
debug "^4.1.0"
globals "^11.1.0"

"@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6":
version "7.8.6"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.6.tgz#acfe0c64e1cd991b3e32eae813a6eb564954b5ff"
Expand Down Expand Up @@ -1898,6 +1997,14 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"

"@babel/types@^7.14.8":
version "7.14.8"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.8.tgz#38109de8fcadc06415fbd9b74df0065d4d41c728"
integrity sha512-iob4soQa7dZw8nodR/KlOQkPh9S4I8RwCxwRIFuiMRYjOzH/KJzdUfDgz6cGi5dDaclXF4P2PAhCdrBJNIg68Q==
dependencies:
"@babel/helper-validator-identifier" "^7.14.8"
to-fast-properties "^2.0.0"

"@babel/types@^7.4.4", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.8.7":
version "7.8.7"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.7.tgz#1fc9729e1acbb2337d5b6977a63979b4819f5d1d"
Expand Down Expand Up @@ -3449,6 +3556,14 @@
estree-walker "^2.0.1"
picomatch "^2.2.2"

"@rollup/pluginutils@^4.1.1":
version "4.1.1"
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
dependencies:
estree-walker "^2.0.1"
picomatch "^2.2.2"

"@samverschueren/stream-to-observable@^0.3.0":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
Expand Down Expand Up @@ -4228,6 +4343,17 @@
d3-interpolate "=1.4.0"
preact "~10.4.8"

"@vitejs/plugin-react-refresh@^1.3.6":
version "1.3.6"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-refresh/-/plugin-react-refresh-1.3.6.tgz#19818392db01e81746cfeb04e096ab3010e79fe3"
integrity sha512-iNR/UqhUOmFFxiezt0em9CgmiJBdWR+5jGxB2FihaoJfqGt76kiwaKoVOJVU5NYcDWMdN06LbyN2VIGIoYdsEA==
dependencies:
"@babel/core" "^7.14.8"
"@babel/plugin-transform-react-jsx-self" "^7.14.5"
"@babel/plugin-transform-react-jsx-source" "^7.14.5"
"@rollup/pluginutils" "^4.1.1"
react-refresh "^0.10.0"

"@webassemblyjs/ast@1.9.0":
version "1.9.0"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
Expand Down Expand Up @@ -15648,6 +15774,11 @@ react-redux@^5.0.7:
loose-envify "^1.1.0"
prop-types "^15.6.0"

react-refresh@^0.10.0:
version "0.10.0"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"
integrity sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==

react-select@1.2.1, react-select@^1.0.0-rc.2:
version "1.2.1"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.2.1.tgz#a2fe58a569eb14dcaa6543816260b97e538120d1"
Expand Down Expand Up @@ -18834,6 +18965,13 @@ vite-plugin-html-config@^1.0.5:
resolved "https://registry.yarnpkg.com/vite-plugin-html-config/-/vite-plugin-html-config-1.0.5.tgz#1265e2f876941410a204aa15dfaf4fd7d587ee7d"
integrity sha512-2v/nLbpFUofCsa19tw/ZcsqautjV2bBpYZH44ysxN2M1QXrnpYLgJhDUE918rKGsN0gTQ0Ej48luTaj5akTM7Q==

vite-plugin-svgr@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-0.3.0.tgz#c81ac7541df98d361249f9ac06b901ae22744a1b"
integrity sha512-C3g+lbn0dsSL+QERO+WGXYv3qdc0Fwa4MC+Lk6hGM7wlvRXU7C1kzITjFkO+Zai8Cymrt+5uZYHJhxiQ96shtw==
dependencies:
"@svgr/core" "^5.5.0"

vite@2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/vite/-/vite-2.4.2.tgz#07d00615775c808530bc9f65641062b349b67929"
Expand Down

0 comments on commit 37bf5f9

Please sign in to comment.