svelte-common 4.4.41 → 4.5.0

package/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-common",
-  "version": "4.4.41",
+  "version": "4.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -9,6 +9,7 @@
   "keywords": [
     "component",
     "svelte",
+    "vite",
     "web"
   ],
   "contributors": [
@@ -19,28 +20,40 @@
   ],
   "license": "BSD-2-Clause",
   "scripts": {
+    "prepare": "vite build",
     "start": "vite dev",
     "test": "npm run test:ava && npm run test:cafe",
-    "test:cafe": "testcafe $BROWSER:headless tests/cafe/*.js -s build/test --page-request-timeout 9000 --app-init-delay 3000 --app \"vite dev\"",
+    "test:cafe": "testcafe $BROWSER:headless tests/cafe/*.js -s build/test --page-request-timeout 9000 --app-init-delay 3000 --app \"vite\"",
     "test:ava": "ava --timeout 2m tests/*.mjs",
     "docs": "documentation readme --section=API ./src/**/*.mjs",
-    "lint": "documentation lint ./src/index.mjs && npm run lint:docs",
-    "lint:docs": "documentation lint ./src/**/*.mjs"
+    "lint": "npm run lint:css && npm run lint:docs && documentation lint ./src/index.mjs",
+    "lint:docs": "documentation lint ./src/**/*.mjs",
+    "lint:css": "stylelint ./src/*.css",
+    "preview": "vite preview"
   },
   "dependencies": {
     "svelte-command": "^1.1.12",
     "svelte-entitlement": "^1.2.22"
   },
   "devDependencies": {
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/release-notes-generator": "^10.0.3",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
     "ava": "^4.3.0",
     "documentation": "^13.2.5",
     "mf-styling": "^1.2.22",
+    "npm-pkgbuild": "^10.7.10",
     "semantic-release": "^19.0.3",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard": "^26.0.0",
     "svelte": "^3.48.0",
     "testcafe": "^1.19.0",
     "vite": "^2.9.12"
   },
+  "optionalDependencies": {
+    "mf-hosting": "^1.6.3"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/arlac77/svelte-common.git"
@@ -49,11 +62,37 @@
     "url": "https://github.com/arlac77/svelte-common/issues"
   },
   "homepage": "https://github.com/arlac77/svelte-common#readme",
+  "pkgbuild": {
+    "content": {
+      "${install.dir}": {
+        "base": "build"
+      },
+      "${nginx.sites.dir}${name}.conf": "pkg/nginx.conf"
+    },
+    "hooks": "pkg/hooks.sh",
+    "groups": "web"
+  },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      [
+        "@semantic-release/exec",
+        {
+          "publishCmd": "npx npm-pkgbuild --available --verbose"
+        }
+      ],
+      "@semantic-release/github"
+    ]
+  },
   "template": {
     "inheritFrom": [
       "arlac77/template-arlac77-github",
       "arlac77/template-ava",
       "arlac77/template-cloudflare",
+      "arlac77/template-css",
+      "arlac77/template-pacman",
       "arlac77/template-svelte-component#next"
     ]
   }

package/pkg/hooks.sh

@@ -0,0 +1,12 @@
+
+post_install() {
+	systemctl reload nginx
+}
+
+post_upgrade() {
+	systemctl reload nginx
+}
+
+post_remove() {
+	systemctl reload nginx
+}

package/pkg/nginx.conf

@@ -0,0 +1,5 @@
+location {{http.path}} {
+  alias {{install.dir}};
+  gzip_static on;
+  add_header Content-Security-Policy "{{csp.header}}" always; 
+}

package/src/components/About.svelte

@@ -1,4 +1,3 @@
-
 <table class="bordered striped">
   <tbody>
     <slot />

package/src/components/AnchorContentCatcher.svelte

@@ -13,9 +13,9 @@
     const a = anchor.getBoundingClientRect();
     const c = content.getBoundingClientRect();
 
-    console.log("A",a);
-    console.log("C",c);
-    
+    console.log("A", a);
+    console.log("C", c);
+
     a.x -= OFFSET;
     a.y -= OFFSET;
     c.x -= OFFSET;
@@ -62,12 +62,14 @@
 
   onMount(() => {
     layoutPath();
-    path.onmouseout = e => { close(); };
+    path.onmouseout = e => {
+      close();
+    };
   });
 </script>
 
 <svg class="acc" width="10000" height="10000">
-  <path bind:this={path}/>
+  <path bind:this={path} />
 </svg>
 <div bind:this={anchor} on:mouseleave={close}>
   <slot name="anchor" />

package/src/components/Bytes.svelte

@@ -1,7 +1,6 @@
 <script>
-    import { formatBytes } from "../util.mjs";
-    export let value;
-  </script>
-  
-  <span>{formatBytes(value)}</span>
-  
+  import { formatBytes } from "../util.mjs";
+  export let value;
+</script>
+
+<span>{formatBytes(value)}</span>

package/src/components/DataGrid.svelte

@@ -1,12 +1,24 @@
 <script>
+  import { setContext } from "svelte";
+
   export let columns = [];
+  const dataGrid = {
+    columns,
+    addColumn: c => {
+      console.log("addColumn", c);
+      columns.push(c);
+    }
+  };
+
+  setContext("DATA_GRID", dataGrid);
+
   export let source = { entries: [] };
 </script>
 
 <table>
   <thead>
     {#each columns as column}
-      <th>{column.title||column.id}</th>
+      <svelte:component this={column.component} />
     {/each}
   </thead>
   <tbody>

package/src/components/DataGridColumn.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { setContext, getContext } from "svelte";
+
+  const dataGrid = getContext("DATA_GRID");
+
+  dataGrid.addColumn({ id, component: this});
+  export let id;
+</script>
+
+<th {id}>
+  <slot />
+</th>

package/src/components/Menue.svelte

@@ -11,6 +11,7 @@
     open = true;
   }
 </script>
+
 {#if open}
   <AnchorContentCatcher close={hide}>
     <a href=" " slot="anchor">

package/src/components/ServerDetails.svelte

@@ -4,8 +4,15 @@
 
   export let server;
 
-  if(!server) { server = {}; }
-  const memory = server.memory || { heapTotal: 0, heapUsed: 0, external: 0, rss: 0 };
+  if (!server) {
+    server = {};
+  }
+  const memory = server.memory || {
+    heapTotal: 0,
+    heapUsed: 0,
+    external: 0,
+    rss: 0
+  };
 </script>
 
 <tr>
@@ -28,20 +35,20 @@
 <tr>
   <td />
   <td>Heap Total</td>
-  <td><Bytes value={memory.heapTotal}/></td>
+  <td><Bytes value={memory.heapTotal} /></td>
 </tr>
 <tr>
   <td />
   <td>Heap Used</td>
-  <td><Bytes value={memory.heapUsed}/></td>
+  <td><Bytes value={memory.heapUsed} /></td>
 </tr>
 <tr>
   <td />
   <td>External</td>
-  <td><Bytes value={memory.external}/></td>
+  <td><Bytes value={memory.external} /></td>
 </tr>
 <tr>
   <td />
   <td>RSS</td>
-  <td><Bytes value={memory.rss}/></td>
+  <td><Bytes value={memory.rss} /></td>
 </tr>

package/src/components/ServiceWorkerDetails.svelte

@@ -6,12 +6,12 @@
   <td colspan="3">Service Worker</td>
 </tr>
 <tr>
-  <td></td>
+  <td />
   <td>State</td>
   <td>{serviceWorker.state}</td>
 </tr>
 <tr>
-  <td></td>
+  <td />
   <td>scriptURL</td>
   <td>{serviceWorker.scriptURL}</td>
 </tr>

package/src/components/ServiceWorkerRegistrationDetails.svelte

@@ -13,12 +13,14 @@
   <td colspan="2">
     <CommandButton
       command={new Command(() => serviceWorkerRegistration.update(), {
-        title: 'Update',
-        shortcuts: 'Command+u'
-      })} />
+        title: "Update",
+        shortcuts: "Command+u"
+      })}
+    />
     <CommandButton
-    command={new Command(() => serviceWorkerRegistration.unregister(), {
-        title: 'Unregister'
-      })} />
+      command={new Command(() => serviceWorkerRegistration.unregister(), {
+        title: "Unregister"
+      })}
+    />
   </td>
 </tr>

package/src/components/SessionDetails.svelte

@@ -1,8 +1,5 @@
 <script>
-  import {
-    EntitlementBadges,
-    Entitlement
-  } from "svelte-entitlement";
+  import { EntitlementBadges, Entitlement } from "svelte-entitlement";
   import DateTime from "./DateTime.svelte";
   export let session;
 </script>
@@ -18,7 +15,7 @@
 <tr>
   <td />
   <td>Expiration</td>
-  <td class={session.isValid ? 'ok' : 'error'}>
+  <td class={session.isValid ? "ok" : "error"}>
     <DateTime date={session.expirationDate} />
   </td>
 </tr>
@@ -29,6 +26,7 @@
     <EntitlementBadges
       entitlements={[...session.entitlements]
         .sort()
-        .map(name => new Entitlement(name))} />
+        .map(name => new Entitlement(name))}
+    />
   </td>
 </tr>

package/src/index.svelte

@@ -10,6 +10,7 @@
   import ServiceWorkerDetails from "./components/ServiceWorkerDetails.svelte";
   import ServiceWorkerRegistrationDetails from "./components/ServiceWorkerRegistrationDetails.svelte";
   import DataGrid from "./components/DataGrid.svelte";
+  import DataGridColumn from "./components/DataGridColumn.svelte";
   import TopNav from "./components/TopNav.svelte";
   import Menue from "./components/Menue.svelte";
   import Collapse from "./components/Collapse.svelte";
@@ -23,6 +24,7 @@
     TopNav,
     Menue,
     DataGrid,
+    DataGridColumn,
     Collapse,
     Modal,
     Peer,
@@ -43,5 +45,4 @@
     formatSecondsSinceEpoch
   } from "./util.mjs";
   export { initializeServiceWorker } from "./service-worker.mjs";
-
 </script>

package/src/util.mjs

@@ -34,8 +34,8 @@ export function formatDurationISO(seconds) {
   let t = false;
 
   for (const d of durationsISO) {
-    if(seconds < 86400 && ! t) {
-      out += 'T';
+    if (seconds < 86400 && !t) {
+      out += "T";
       t = true;
     }
 

package/vite.config.js

@@ -1,24 +1,23 @@
-import { readFile } from "fs/promises";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
+//import { extractFromPackage } from "npm-pkgbuild/src/module.mjs";
 import { defineConfig } from "vite";
 
-const encodingOptions = { encoding: "utf8" };
-
 export default defineConfig(async ({ command, mode }) => {
-  const pkg = JSON.parse(
-    await readFile(
-      new URL("package.json", import.meta.url).pathname,
-      encodingOptions
-    )
+  const { extractFromPackage } = await import(
+    new URL("node_modules/npm-pkgbuild/src/module.mjs", import.meta.url)
   );
-
+  const res = extractFromPackage({
+    dir: new URL("./", import.meta.url).pathname
+  });
+  const first = await res.next();
+  const pkg = first.value;
+  const properties = pkg.properties;
+  const base = properties["http.path"] + "/";
   const production = mode === "production";
 
-  process.env["VITE_NAME"] = pkg.name;
-  process.env["VITE_DESCRIPTION"] = pkg.description;
-  process.env["VITE_VERSION"] = pkg.version;
-
-  const base = `/components/${pkg.name}/example/`;
+  process.env["VITE_NAME"] = properties.name;
+  process.env["VITE_DESCRIPTION"] = properties.description;
+  process.env["VITE_VERSION"] = properties.version;
 
   return {
     base,
@@ -38,7 +37,7 @@ export default defineConfig(async ({ command, mode }) => {
     },
     server: { host: true },
     build: {
-      outDir: "../build",
+      outDir: "../../../build",
       target: "esnext",
       emptyOutDir: true,
       minify: production,