diff --git a/frontend/dist/Inter-Variable.ttf b/frontend/dist/Inter-Variable.ttf new file mode 100644 index 0000000000..ec3164efa8 Binary files /dev/null and b/frontend/dist/Inter-Variable.ttf differ diff --git a/frontend/index.html b/frontend/dist/index.html similarity index 99% rename from frontend/index.html rename to frontend/dist/index.html index f416fca4ec..afb5c698dd 100644 --- a/frontend/index.html +++ b/frontend/dist/index.html @@ -3,14 +3,14 @@ - Vite + Svelte + TS - + Embed demo + +
- - + + + + \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json index 29aae9e7f3..191e322d70 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,6 +4,7 @@ "scripts": { "dev": "vite dev", "build": "vite build", + "build-embed": "vite build -c vite.embed.config.js", "preview": "vite preview", "check": "svelte-check --tsconfig ./tsconfig.json --threshold warning", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js deleted file mode 100644 index a6c3a00c32..0000000000 --- a/frontend/rollup.config.js +++ /dev/null @@ -1,42 +0,0 @@ -import commonjs from '@rollup/plugin-commonjs' -import resolve from '@rollup/plugin-node-resolve' -import typescript from '@rollup/plugin-typescript' -import svelte from 'rollup-plugin-svelte' -import terser from '@rollup/plugin-terser' -import sveltePreprocess from 'svelte-preprocess' - -const production = !process.env.ROLLUP_WATCH - -export default { - // The file we created with our web component wrapper. - input: 'src/embed.js', - output: { - sourcemap: !production, - format: 'iife', - name: 'app', - // We output it to public. This way, our svelte kit - // app will also host the web components. - file: 'build/app.js' - }, - // Normal rollup svelte configuration. Nothing fancy - // happening here. - plugins: [ - typescript(), - svelte({ - preprocess: sveltePreprocess({ - sourceMap: !production, - postcss: true - }), - // We just make sure that no global CSS is injeced - // into the page that imports this script. - emitCss: false, - compilerOptions: { - dev: !production - - // customElement: true, - } - }), - resolve({ browser: true, dedupe: ['svelte'] }), - commonjs() - ] -} diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 0e2292b510..74edcdaf5c 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -1,7 +1,6 @@ -// import { sveltekit } from '@sveltejs/kit/vite' +import { sveltekit } from '@sveltejs/kit/vite' import { readFileSync } from 'fs' import { fileURLToPath } from 'url' -import { svelte } from '@sveltejs/vite-plugin-svelte' const file = fileURLToPath(new URL('package.json', import.meta.url)) const json = readFileSync(file, 'utf8') @@ -15,7 +14,7 @@ const config = { preview: { port: 3000 }, - plugins: [svelte()], + plugins: [sveltekit()], define: { __pkg__: version }, @@ -24,35 +23,8 @@ const config = { }, resolve: { alias: { - path: 'path-browserify', - $lib: ['/src/lib'], - '$lib/*': ['/src/lib/*'], - '$app/navigation': ['/src/lib/fakesvelte.js'], - '$app/stores': ['/src/lib/fakesvelte.js'], - '$app/environment': ['/src/lib/fakesvelte.js'] + path: 'path-browserify' } - }, - build: { - lib: { - // Could also be a dictionary or array of multiple entry points - entry: 'src/embed.js', - name: 'AppViewer', - // the proper extensions will be added - fileName: 'appviewer', - formats: ['iife'] - } - // rollupOptions: { - // external: ['highlight.js'], - // input: 'src/embed.js', - // output: { - // format: 'esm', - // name: 'app', - // // We output it to public. This way, our svelte kit - // // app will also host the web components. - // dir: 'build' - // // file: 'build/app.js' - // } - // } } } diff --git a/frontend/vite.embed.config.js b/frontend/vite.embed.config.js new file mode 100644 index 0000000000..44c422f449 --- /dev/null +++ b/frontend/vite.embed.config.js @@ -0,0 +1,59 @@ +// import { sveltekit } from '@sveltejs/kit/vite' +import { readFileSync } from 'fs' +import { fileURLToPath } from 'url' +import { svelte } from '@sveltejs/vite-plugin-svelte' + +const file = fileURLToPath(new URL('package.json', import.meta.url)) +const json = readFileSync(file, 'utf8') +const version = JSON.parse(json) + +/** @type {import('vite').UserConfig} */ +const config = { + server: { + port: 3000 + }, + preview: { + port: 3000 + }, + plugins: [svelte()], + define: { + __pkg__: version + }, + optimizeDeps: { + include: ['highlight.js', 'highlight.js/lib/core'] + }, + resolve: { + alias: { + path: 'path-browserify', + $lib: ['/src/lib'], + '$lib/*': ['/src/lib/*'], + '$app/navigation': ['/src/lib/fakesvelte.js'], + '$app/stores': ['/src/lib/fakesvelte.js'], + '$app/environment': ['/src/lib/fakesvelte.js'] + } + }, + build: { + lib: { + // Could also be a dictionary or array of multiple entry points + entry: ['src/embed.js'], + name: 'AppViewer', + // the proper extensions will be added + fileName: 'appviewer', + formats: ['iife'] + } + // rollupOptions: { + // external: ['highlight.js'], + // input: 'src/embed.js', + // output: { + // format: 'esm', + // name: 'app', + // // We output it to public. This way, our svelte kit + // // app will also host the web components. + // dir: 'build' + // // file: 'build/app.js' + // } + // } + } +} + +export default config