diff --git a/.gitignore b/.gitignore index 457b904e7..38d8f97e4 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ packages/server/.env packages/server/dist packages/frontend/dist +packages/frontend/profiler packages/viewer/dist packages/objectloader/dist *.env @@ -49,4 +50,4 @@ packages/server/.vscode/*.log # ST workspace files ./speckle.sublime-project -./speckle.sublime-workspace \ No newline at end of file +./speckle.sublime-workspace diff --git a/package.json b/package.json index d6fc2a325..62790a2c8 100644 --- a/package.json +++ b/package.json @@ -43,8 +43,7 @@ "tslib": "^2.3.1", "core-js": "3.22.4", "graphql": "^15", - "typescript": "^4.5.4", - "vue-loader": "^15.10.0" + "typescript": "^4.5.4" }, "config": { "commitizen": { diff --git a/packages/frontend/build-config/esbuildPlugin.js b/packages/frontend/build-config/esbuildPlugin.js deleted file mode 100644 index 3985fd1d7..000000000 --- a/packages/frontend/build-config/esbuildPlugin.js +++ /dev/null @@ -1,68 +0,0 @@ -const TARGET = 'es2019' - -function prepareJs(jsRule, api) { - // Delete babel related loaders - jsRule.uses.delete('thread-loader').delete('babel-loader') - - // Add caching config - jsRule - .use('cache-loader') - .loader('cache-loader') - .options( - api.genCacheConfig('js-esbuild-loader', { - target: TARGET, - esbuildLoaderVersion: require('esbuild-loader/package.json').version - }) - ) - - // Add new esbuild loader - jsRule.use('esbuild-loader').loader('esbuild-loader').options({ - target: TARGET - }) -} - -function prepareTs(tsRule, api) { - // Delete related loaders - tsRule.uses.delete('ts-loader').delete('babel-loader') - - // Add caching config - tsRule - .use('cache-loader') - .loader('cache-loader') - .options( - api.genCacheConfig('ts-esbuild-loader', { - target: TARGET, - esbuildLoaderVersion: require('esbuild-loader/package.json').version - }) - ) - - // Add new esbuild loader - tsRule.use('esbuild-loader').loader('esbuild-loader').options({ - target: TARGET, - loader: 'tsx' - }) -} - -/** - * Dev builds use esbuild instead of babel for improved speed - * @param {import('@vue/cli-service/lib/PluginAPI')} api - **/ -function plugin(api) { - const isProdBuild = process.env.NODE_ENV === 'production' - const isDevBuild = !isProdBuild - - if (!isDevBuild) return - - api.chainWebpack((config) => { - const jsRule = config.module.rule('js').test(/\.m?jsx?$/) - prepareJs(jsRule, api) - - const tsRule = config.module.rule('ts').test(/\.ts$/) - prepareTs(tsRule, api) - - // No TSX support currently, we can look into it if needed - config.module.rules.delete('tsx') - }) -} - -module.exports = plugin diff --git a/packages/frontend/build-config/gqlPlugin.js b/packages/frontend/build-config/gqlPlugin.js deleted file mode 100644 index 997a9f457..000000000 --- a/packages/frontend/build-config/gqlPlugin.js +++ /dev/null @@ -1,27 +0,0 @@ -const TARGET = 'es2019' - -/** - * GQL file support (previously this was managed by the vue apollo cli plugin) - * @param {import('@vue/cli-service/lib/PluginAPI')} api - **/ -function plugin(api) { - api.chainWebpack((config) => { - const gqlRule = config.module.rule('gql').test(/\.(gql|graphql)$/) - - // add caching - gqlRule - .use('cache-loader') - .loader('cache-loader') - .options( - api.genCacheConfig('gql-cache-loader', { - target: TARGET, - graphqltagVersion: require('graphql-tag/package.json').version - }) - ) - - // add gql loader - gqlRule.use('gql-loader').loader('graphql-tag/loader') - }) -} - -module.exports = plugin diff --git a/packages/frontend/public/app.html b/packages/frontend/index.html similarity index 90% rename from packages/frontend/public/app.html rename to packages/frontend/index.html index e23e5d66c..8be089fd7 100644 --- a/packages/frontend/public/app.html +++ b/packages/frontend/index.html @@ -1,7 +1,6 @@ - - - + + - - <%= htmlWebpackPlugin.options.title %> + + Speckle - + - + diff --git a/packages/frontend/nginx/templates/nginx.conf.template b/packages/frontend/nginx/templates/nginx.conf.template index 5022a8abc..6699d4ec9 100644 --- a/packages/frontend/nginx/templates/nginx.conf.template +++ b/packages/frontend/nginx/templates/nginx.conf.template @@ -71,29 +71,29 @@ server { location / { root /usr/share/nginx/html; - index app.html; - try_files $uri $uri/ /app.html; - add_header Cache-Control "no-store, no-cache, must-revalidate"; + index index.html; + try_files $uri $uri/ /index.html; + add_header Cache-Control "no-store, no-cache, must-revalidate"; } - location ~* ^/(favicon.ico|logo.svg) { + location ~* ^/(favicon.ico|logo.svg|loadingImage.png|og_image.png) { root /usr/share/nginx/html; - index app.html; - try_files $uri $uri/ /app.html; + index index.html; + try_files $uri $uri/ /index.html; expires 1d; } - location ~* ^/(js/.*|fonts/.*|(css/.*)|(img/.*)) { + location ~* ^/(js/.*|fonts/.*|(css/.*)|(img/.*)|(assets/.*)) { root /usr/share/nginx/html; - index app.html; - try_files $uri $uri/ /app.html; + index index.html; + try_files $uri $uri/ /index.html; expires 1y; } location ~ ^/streams/.* { default_type text/html; content_by_lua_block { - local f = assert(io.open('/usr/share/nginx/html/app.html', "rb")) + local f = assert(io.open('/usr/share/nginx/html/index.html', "rb")) local content = f:read("*all") f:close() local http_host = ngx.var.http_host diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 130c8986d..613243e60 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -3,16 +3,13 @@ "version": "2.5.4", "private": true, "scripts": { - "serve": "ws -p 8080 -d dist -r '/([a-zA-Z0-9-_/]*)(\\?.*)? -> /app.html' ", - "build": "vue-cli-service build --mode production --silent", - "lint": "eslint . --ext .js,.ts,.vue,.tsx,.jsx", + "dev": "vite", + "build": "vite build", + "serve": "vite preview --port 8080", + "profile": "vite-bundle-visualizer --output profiler/stats.html", + "lint:eslint": "eslint . --ext .js,.ts,.vue,.tsx,.jsx", "lint:ts": "vue-tsc --noEmit", - "build:dev": "vue-cli-service build --mode development --silent", - "build:dev:profile": "yarn build:dev -- --profile", - "build:profile": "yarn build -- --profile", - "dev": "vue-cli-service serve --mode development", - "inspect": "vue-cli-service inspect --mode production", - "inspect:dev": "vue-cli-service inspect --mode development", + "lint": "yarn lint:eslint && yarn lint:ts", "gqlgen": "graphql-codegen --config codegen.yml" }, "dependencies": { @@ -44,6 +41,7 @@ "graphql": "^15.0.0", "graphql-tag": "^2.12.6", "lodash": "^4.17.21", + "lodash-es": "^4.17.21", "numeral": "^2.0.6", "portal-vue": "^2.1.7", "regenerator-runtime": "^0.13.9", @@ -79,41 +77,23 @@ "@types/node": "^17.0.43", "@typescript-eslint/eslint-plugin": "^5.21.0", "@typescript-eslint/parser": "^5.21.0", - "@vue/cli": "^4.5.19", - "@vue/cli-plugin-babel": "~4.3.1", - "@vue/cli-plugin-router": "~4.3.1", - "@vue/cli-plugin-typescript": "~4.5.19", - "@vue/cli-service": "~4.3.1", - "@vue/eslint-config-typescript": "^11.0.0", - "babel-eslint": "^10.1.0", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/eslint-config-typescript": "^11.0.1", "babel-plugin-lodash": "^3.3.4", - "duplicate-dependencies-webpack-plugin": "^1.0.2", - "esbuild-loader": "^2.18.0", "eslint": "^8.11.0", "eslint-config-prettier": "^8.5.0", - "eslint-loader": "^4.0.2", "eslint-plugin-vue": "^9.2.0", - "local-web-server": "^5.2.0", - "lodash-webpack-plugin": "^0.11.6", "prettier": "^2.5.1", "sass": "~1.32.6", - "sass-loader": "^8.0.0", - "speed-measure-webpack-plugin": "^1.5.0", "type-fest": "^2.13.1", - "typescript": "~4.1.5", - "vue-cli-plugin-vuetify": "^2.5.1", - "vue-tsc": "^0.40.13", - "vuetify-loader": "^1.9.1", - "webpack": "^4.46.0", - "webpack-bundle-analyzer": "^4.5.0" + "typescript": "~4.5.5", + "unplugin-vue-components": "^0.22.4", + "vite": "^3.1.0", + "vite-bundle-visualizer": "^0.4.1", + "vite-plugin-simple-gql": "^0.5.0", + "vue-tsc": "^0.40.13" }, "engines": { "node": "^16.0.0" - }, - "vuePlugins": { - "service": [ - "./build-config/esbuildPlugin.js", - "./build-config/gqlPlugin.js" - ] } } diff --git a/packages/frontend/src/bootstrapper.ts b/packages/frontend/src/bootstrapper.ts index 5621b7388..57923bfd9 100644 --- a/packages/frontend/src/bootstrapper.ts +++ b/packages/frontend/src/bootstrapper.ts @@ -12,9 +12,8 @@ import { formatNumber } from '@/plugins/formatNumber' // Accepts 'max' parameter to set it's formatting while being animated Vue.filter('prettynum', formatNumber) -// process.env.NODE_ENV is injected by Webpack -const enableDevMode = - !!process.env.FORCE_VUE_DEVTOOLS || process.env.NODE_ENV === 'development' +// env vars injected by Vite +const enableDevMode = !!import.meta.env.FORCE_VUE_DEVTOOLS || !!import.meta.env.DEV Vue.config.productionTip = enableDevMode Vue.config.devtools = enableDevMode diff --git a/packages/frontend/src/config/apolloConfig.ts b/packages/frontend/src/config/apolloConfig.ts index 3d7a0d03f..27cd4c7eb 100644 --- a/packages/frontend/src/config/apolloConfig.ts +++ b/packages/frontend/src/config/apolloConfig.ts @@ -20,7 +20,7 @@ import { incomingOverwritesExistingMergeFunction } from '@/main/lib/core/helpers/apolloSetupHelper' import { merge } from 'lodash' -import { statePolicies as commitObjectViewerStatePolicies } from '@/main/lib/viewer/commit-object-viewer/stateManager' +import { statePolicies as commitObjectViewerStatePolicies } from '@/main/lib/viewer/commit-object-viewer/stateManagerCore' // Name of the localStorage item const AUTH_TOKEN = LocalStorageKeys.AuthToken @@ -29,7 +29,7 @@ const httpEndpoint = `${window.location.origin}/graphql` // WS endpoint const wsEndpoint = `${window.location.origin.replace('http', 'ws')}/graphql` // app version -const appVersion = process.env.SPECKLE_SERVER_VERSION || 'unknown' +const appVersion = import.meta.env.SPECKLE_SERVER_VERSION || 'unknown' function hasAuthToken() { return !!AppLocalStorage.get(AUTH_TOKEN) @@ -201,7 +201,7 @@ function createApolloClient() { link, cache, ssrForceFetchDelay: 100, - connectToDevTools: process.env.NODE_ENV !== 'production', + connectToDevTools: import.meta.env.DEV, name: 'web', version: appVersion }) diff --git a/packages/frontend/src/main/App.vue b/packages/frontend/src/main/App.vue index 13c999df6..b17c5cec7 100644 --- a/packages/frontend/src/main/App.vue +++ b/packages/frontend/src/main/App.vue @@ -1,4 +1,4 @@ -