purplebugs · purplebugs · Sep 23, 2024 · Sep 16, 2024 · Sep 22, 2024 · Sep 23, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,11 @@
 /node_modules
 public/build
+build/*
 package-lock.json
 
 # Tests
 /test-results/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
diff --git a/README.md b/README.md
@@ -21,19 +21,19 @@ Web component created using [lit](https://lit.dev/)
 1. Copy and paste the following code inside the `<body></body>` tag of website where the component should appear, replacing `GOOGLE-API-KEY` with your key
 
 ```
-<alpaca-map key="GOOGLE-API-KEY"></alpaca-map>
+<alpaca-map apiKey="GOOGLE-API-KEY"></alpaca-map>
 ```
 
 1. Optional. To center the map on a favourite farm, replace the latitude and longitude with its `centerLat` and `centerLng` coordinates
 
 ```
-   <alpaca-map key="GOOGLE-API-KEY" centerLat="-33.8688" centerLng="151.2093"></alpaca-map>
+   <alpaca-map apiKey="GOOGLE-API-KEY" centerLat="-33.8688" centerLng="151.2093"></alpaca-map>
 ```
 
 1. Optional. To override the data source, set the value of `dataSource`, eg
 
 ```
-   <alpaca-map key="GOOGLE-API-KEY" dataSource="https://www.replace-me.com/api/cool-api"></alpaca-map>
+   <alpaca-map apiKey="GOOGLE-API-KEY" dataSource="https://www.replace-me.com/api/cool-api"></alpaca-map>
 ```
 
 ## For developers 🤖

diff --git a/dev-utils/dev-build.js b/dev-utils/dev-build.js
@@ -0,0 +1,49 @@
+import rollupPluginCommonjs from "@rollup/plugin-commonjs";
+import rollupPluginResolve from "@rollup/plugin-node-resolve";
+import rollupPluginReplace from "@rollup/plugin-replace";
+import rollupPluginTerser from "@rollup/plugin-terser";
+import { rollup } from "rollup";
+
+const inputOptions = {
+  input: ["./src/alpaca-map.js"],
+  plugins: [
+    rollupPluginResolve({ 
+      preferBuiltins: true 
+    }),
+    rollupPluginCommonjs({ 
+      include: /node_modules/ 
+    }),
+    rollupPluginReplace({
+      "process.env.NODE_ENV": JSON.stringify("production"),
+      preventAssignment: true,
+    }),
+    /*
+    rollupPluginTerser({ 
+      format: { 
+        comments: false 
+      } 
+    }),
+    */
+  ],
+};
+
+const outputOptionsList = [
+  {
+    preserveModules: true,
+    dir: './public/build',
+    // file: "./public/build/alpaca-map.js",
+    format: "es",
+    // sourcemap: true,
+    interop: 'esModule',
+  },
+];
+
+let bundle = await rollup(inputOptions);
+
+for (const outputOptions of outputOptionsList) {
+  await bundle.write(outputOptions);
+}
+
+if (bundle) {
+  await bundle.close();
+}
diff --git a/dev-server.js → dev-utils/dev-server.js b/dev-server.js → dev-utils/dev-server.js
@@ -8,7 +8,7 @@ const fastify = Fastify({
 });
 
 fastify.register(fastifyStatic, {
-  root: path.join(import.meta.dirname, "./public"),
+  root: path.join(import.meta.dirname, "../public"),
   prefix: "/",
 });
 

diff --git a/build.js → dev-utils/pub-build.js b/build.js → dev-utils/pub-build.js
@@ -1,29 +1,33 @@
 import rollupPluginCommonjs from "@rollup/plugin-commonjs";
 import rollupPluginResolve from "@rollup/plugin-node-resolve";
 import rollupPluginReplace from "@rollup/plugin-replace";
-import rollupPluginTerser from "@rollup/plugin-terser";
 import { rollup } from "rollup";
 
 const inputOptions = {
   input: ["./src/alpaca-map.js"],
+  external: ['lit'],
   plugins: [
-    rollupPluginResolve({ preferBuiltins: true }),
-    rollupPluginCommonjs({ include: /node_modules/ }),
+    rollupPluginResolve({ 
+      exportConditions: ['production'],
+      preferBuiltins: true 
+    }),
+    rollupPluginCommonjs({ 
+      include: /node_modules/ 
+    }),
     rollupPluginReplace({
       "process.env.NODE_ENV": JSON.stringify("production"),
       preventAssignment: true,
     }),
-    rollupPluginTerser({ format: { comments: false } }),
   ],
 };
 
 const outputOptionsList = [
   {
-    // preserveModules: true,
-    // dir: './public/build',
-    file: "./public/build/alpaca-map.js",
+    preserveModules: true,
+    entryFileNames: '[name].mjs',
+    dir: './build/node',
     format: "es",
-    sourcemap: true,
+    interop: 'esModule',
   },
 ];
 

diff --git a/package.json b/package.json
@@ -2,37 +2,43 @@
   "name": "@purplebugs/alpaca-map",
   "type": "module",
   "version": "0.0.4",
-  "main": "src/alpaca-map.js",
+  "exports": {
+    ".": "./build/node/src/alpaca-map.mjs"
+  },
   "files": [
     "package.json",
     "README.md",
+    "build",
     "src"
   ],
   "scripts": {
-    "build:watch": "node --watch-path=./src build.js",
-    "build": "node build.js",
+    "build:publish:node": "node ./dev-utils/pub-build.js",
+    "build:watch": "node --watch-path=./src ./dev-utils/dev-build.js",
+    "build": "node ./dev-utils/dev-build.js",
     "prettier": "prettier . --write",
-    "start": "node dev-server.js",
+    "start": "node ./dev-utils/dev-server.js",
     "test": "node --test",
-    "test-ui": "playwright test"
+    "test-ui": "playwright test",
+    "prepublishOnly": "npm run build:publish:node"
   },
   "author": "",
   "license": "MIT",
   "description": "",
   "devDependencies": {
+    "@googlemaps/js-api-loader": "1.16.8",
+    "@googlemaps/markerclusterer": "^2.5.3",
     "@fastify/static": "7.0.4",
     "@playwright/test": "^1.45.1",
     "@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",
-    "@types/node": "^20.14.10",
-    "fastify": "4.28.0",
-    "prettier": "3.3.2",
-    "rollup": "4.18.0"
+    "@types/node": "20.14.10",
+    "fastify": "4.28.1",
+    "prettier": "3.3.3",
+    "rollup": "4.21.3"
   },
   "dependencies": {
-    "@googlemaps/markerclusterer": "^2.5.3",
-    "lit": "^3.1.4"
+    "lit": "3.1.4"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -31,7 +31,7 @@ <h1>Alpaca Map web component - index.html page header</h1>
         <alpaca-map key="AIzaSyB4xD7fB993xNwqzBwF0vFpV3Qg_N9UTTc" centerLat="-33.8688" centerLng="151.2093"></alpaca-map>
      -->
 
-      <alpaca-map key="AIzaSyB4xD7fB993xNwqzBwF0vFpV3Qg_N9UTTc"></alpaca-map>
+      <alpaca-map apiKey="AIzaSyB4xD7fB993xNwqzBwF0vFpV3Qg_N9UTTc"></alpaca-map>
       <!-- 
     // USAGE Step 2 - END
      -->
@@ -41,6 +41,6 @@ <h1>Alpaca Map web component - index.html page header</h1>
       </p>
     </div>
 
-    <script type="module" src="/build/alpaca-map.js"></script>
+    <script type="module" src="/build/src/alpaca-map.js"></script>
   </body>
 </html>