some changes regarding build

- bulma is now processed by bundler instead
  of being downloaded directly from CDN
- the bookmarklet entry point is now built separately
  from the site, as a library

Author: nmdanny

Closure_Front_End/index.html

@@ -6,7 +6,6 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="/favicon.ico">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma-rtl.min.css">
 
   <!-- icons -->
   <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

Closure_Front_End/package-lock.json

@@ -5,7 +5,9 @@
   "author": "noa_barlia",
   "scripts": {
     "serve": "vite",
-    "build": "vite build",
+    "build": "npm run build:site && npm run build:bookmarklet",
+    "build:site": "vite build --config vite.config.js",
+    "build:bookmarklet": "vite build --config vite-bookmarklet.config.js",
     "preview": "vite preview --port 8080",
     "test:unit": "jest tests/unit",
     "lint": "eslint src --ext .vue,.js",
@@ -14,6 +16,7 @@
   "dependencies": {
     "@auth0/auth0-spa-js": "^1.15.0",
     "axios": "^0.21.1",
+    "bulma": "^0.9.3",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"

Closure_Front_End/package.json

@@ -85,4 +85,7 @@ export default {
     },
   },
 };
-</script>
+</script>
+<style>
+@import "bulma/css/bulma-rtl.css";
+</style>

Closure_Front_End/src/App.vue

@@ -33,7 +33,7 @@ export default {
     } else {
       // TODO: rename `AUTH0_REDIRECT_URI' to something more informative
       const siteURL = import.meta.env.VITE_AUTH0_REDIRECT_URI
-      const scrapeScriptFullURL = new URL("course-scrape-prod.js", siteURL)
+      const scrapeScriptFullURL = new URL("course-scrape-prod.es.js", siteURL)
       console.log(`Generating bookmarklet for production, scrape script: ${scrapeScriptFullURL}`)
 
       const url = encodeURI(`javascript:(async function() {

Closure_Front_End/src/huji-import/Bookmarklet.vue

@@ -115,7 +115,7 @@ export default {
 </script>
 
 <style scoped>
-  @import "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma-rtl.min.css";
+  @import "bulma/css/bulma-rtl.css";
   #courseScrapeRoot {
     margin: 5vh 5vw 5vh 5vw;
   }

Closure_Front_End/src/huji-import/EmbeddedScrapeStatus.vue

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+
+import commonConfig from './vite-common.config.js'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  ...commonConfig,
+  build: {
+    emptyOutDir: false,
+    lib: {
+      entry: path.resolve(__dirname, 'src/huji-import/course-scrape-entry.js'),
+      name: 'course-scrape-prod',
+      fileName: 'course-scrape-prod'
+    },
+  }
+})

Closure_Front_End/vite-bookmarklet.config.js

@@ -0,0 +1,24 @@
+import vue from '@vitejs/plugin-vue'
+import eslint from '@rollup/plugin-eslint'
+import path from 'path'
+
+/** @type{import('vite').UserConfigExport} */
+const commonConfig = {
+  plugins: [vue(), { ...eslint({
+    include: '**/*.+(vue|js|jsx|ts|tsx)'
+  }), enforce: 'pre', apply: 'build'}],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '/src')
+    }
+  },
+  server: {
+    port: 8080,
+    strictPort: true,
+    hmr: {
+      protocol: "ws", host: "localhost", port:8080
+    }
+  },
+}
+
+export default commonConfig

Closure_Front_End/vite-common.config.js

@@ -1,51 +1,8 @@
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import eslint from '@rollup/plugin-eslint';
-import path from 'path'
-
-
-/** This function is used to determine the file-name of the production assets entry-points.
- *
- *  By default, every asset except `index.html` is concatenated with a hash, which is useful for caching.
- *  However, for the scrape script, we would like to have a constant path which we can reference when
- *  generating the bookmarklet URL at build-time.
- *
- *  @type {(chunkInfo: import('rollup').PreRenderedChunk) => string }
-**/
-const entryFileNameNamingRule = (chunkInfo) => {
-  if (chunkInfo.name === "course-scrape-prod") {
-    return "course-scrape-prod.js"
-  }
-  return "[name].[hash].js"
-}
 
+import commonConfig from './vite-common.config.js'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), { ...eslint({
-    include: '**/*.+(vue|js|jsx|ts|tsx)'
-  }), enforce: 'pre', apply: 'build'}],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, '/src')
-    }
-  },
-  server: {
-    port: 8080,
-    strictPort: true,
-    hmr: {
-      protocol: "ws", host: "localhost", port:8080
-    }
-  },
-  build: {
-    rollupOptions: {
-      input: {
-        main: path.resolve(__dirname, 'index.html'),
-        "course-scrape-prod": path.resolve(__dirname, 'src/huji-import/course-scrape-entry.js')
-      },
-      output: {
-        entryFileNames: entryFileNameNamingRule
-      }
-    }
-  }
+  ...commonConfig
 })