Merge pull request #49 from ssciwr/bundling

Bundling
ssciwr · Sep 18, 2024 · 04be377 · 04be377
2 parents 69b07ed + 9c0d743
commit 04be377
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,22 @@ npm run dev
 
 ## Usage
 
-T.B.A.
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Svelte Component</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" type="text/css" crossorigin href="bundle.css">
+    <script src="bundle.js"></script>
+</head>
+<body>
+    <easydb-detail-view uuid="e95dcb74-77f6-4794-b468-506da8b7a3a1"/>
+</body>
+</html>
+```
 
 ## Issues
 

diff --git a/bundle/index.html b/bundle/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Svelte Component</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" type="text/css" crossorigin href="bundle.css">
+    <script src="bundle.js"></script>
+</head>
+<body>
+    <easydb-detail-view uuid="e95dcb74-77f6-4794-b468-506da8b7a3a1"/>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -8,9 +8,14 @@
     "build": "vite build",
     "easydb": "node ./src/generate.js",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
+    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json",
+    "bundle": "rollup -c"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.7",
+    "@rollup/plugin-terser": "^0.4.4",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@tsconfig/svelte": "^5.0.4",
     "autoprefixer": "^10.4.2",
@@ -19,6 +24,9 @@
     "oclif": "^4.14.11",
     "postcss": "^8.4.32",
     "postcss-load-config": "^5.0.2",
+    "rollup": "^4.21.2",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-svelte": "^7.2.2",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.1",
     "tailwind-merge": "^2.4.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,39 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import css from 'rollup-plugin-css-only';
+import terser from '@rollup/plugin-terser';
+
+export default {
+  input: './src/bundle.js',
+  output: {
+    file: 'bundle/bundle.js',
+    format: 'iife',
+    name: 'EasyDBDetailView',
+    inlineDynamicImports: true
+  },
+  plugins: [
+    svelte({
+      emitCss: true,
+      compilerOptions: {
+        customElement: true
+      }
+    }),
+    replace({
+      values: {
+        "this.attachShadow({ mode: 'open' });": ""
+      },
+      delimiters: ['', '']
+    }),
+    css({
+      output: 'bundle.css'
+    }),
+    resolve({
+      browser: true,
+      dedupe: ['svelte', 'flowbite-svelte']
+    }),
+    commonjs(),
+    terser()
+  ]
+};
diff --git a/src/bundle.js b/src/bundle.js
@@ -0,0 +1,3 @@
+import EasyDBDetailView from "./components/EasyDBDetailView.svelte";
+
+export default EasyDBDetailView;
diff --git a/src/components/EasyDBDetailView.svelte b/src/components/EasyDBDetailView.svelte
@@ -1,6 +1,12 @@
+<svelte:options customElement={{
+  tag: 'easydb-detail-view',
+  shadow: 'none'
+  }}
+/>
+
 <script>
   import { pregen_instance } from "../lib/easydbPregen";
-  import { appLanguageStore, dataLanguagesStore, easydbInstanceStore, easydbInstanceDataPromiseStore, userGivenMasksToRenderStore, uuidStore } from "../lib/stores";
+  import { appLanguageStore, dataLanguagesStore, easydbInstanceStore, easydbInstanceDataStore, userGivenMasksToRenderStore, uuidStore } from "../lib/stores";
 
   import DetailViewImpl from "./logic/DetailViewImpl.svelte";
   import Waiting from "./utils/Waiting.svelte";
@@ -19,10 +25,10 @@
   $: uuidStore.set([uuid]);
 </script>
 
-{#await $easydbInstanceDataPromiseStore }
+{#if !$easydbInstanceDataStore }
   <Waiting>
     Accessing the EasyDB instance...
   </Waiting>
-{:then}
+{:else}
   <DetailViewImpl mask={mask}/>
-{/await}
+{/if}
diff --git a/src/components/fields/Link.svelte b/src/components/fields/Link.svelte
@@ -16,9 +16,6 @@
   let detailViewComponent;
 
   function requiresPopover() {
-    console.log($masksToRenderStore);
-    console.log(fdata._mask);
-    console.log($masksToRenderStore.includes(fdata._mask));
     if (!$masksToRenderStore) {
       return false;
     }