@navette-js/wire 1.0.0-beta.3 → 1.0.0-beta.5

package/THIRD-PARTY-NOTICES.md

@@ -4,9 +4,10 @@ Navette is an independent project, not affiliated with or endorsed by the Filame
 
 | Work | Used for | License | License file |
 |---|---|---|---|
-| [Filament](https://github.com/filamentphp/filament) © Filament | HTML markup derived from its Blade views, compiled CSS and JavaScript (`@navette-js/panels/dist/filament`), English translations (`@navette-js/support/data`) | MIT | `packages/panels/dist/FILAMENT-LICENSE.md` |
+| [Filament](https://github.com/filamentphp/filament) © Filament | HTML markup derived from its Blade views, compiled CSS and JavaScript (`@navette-js/panels/dist/filament`), English translations (`@navette-js/support/data`), image editor icons (`@navette-js/support/icons/filament`) | MIT | `packages/panels/dist/FILAMENT-LICENSE.md`, `packages/support/icons/filament/LICENSE.md` |
 | [Livewire](https://github.com/livewire/livewire) © Caleb Porzio | Client script `livewire.js` (`@navette-js/wire/vendor`); the server runtime follows its protocol | MIT | `packages/wire/vendor/LIVEWIRE-LICENSE.md` |
 | [Heroicons](https://github.com/tailwindlabs/heroicons) | SVG icons (`@navette-js/support/icons`) | MIT | `packages/support/icons/HEROICONS-LICENSE.md` |
+| [QR Code generator library](https://www.nayuki.io/page/qr-code-generator-library) © Project Nayuki | Structure of the QR Code encoder (`@navette-js/panels`, `qr-code.ts`) | MIT | header of `packages/panels/src/qr-code.ts` |
 | [Inter](https://github.com/rsms/inter) © The Inter Project Authors | Default font files (`@navette-js/panels/dist/filament/fonts`) | SIL Open Font License 1.1 | `packages/panels/dist/filament/fonts/INTER-LICENSE.txt` |
 
 Runtime dependencies installed from npm (Express, Knex, Objection, better-sqlite3, Tiptap, EJS, Busboy…) keep their own licenses.

package/lib/index.d.ts

@@ -76,6 +76,11 @@ export declare abstract class Component {
     redirect(url: string, navigate?: boolean): void;
     skipRender(): void;
     /** Partial render: only the `wire:partial="<name>"` fragment is sent back (effects.partials), the component is not re-rendered. */
+    /**
+         * JavaScript run once in the browser for this component, with `$wire` in scope (Livewire's `@script`). Call it while rendering;
+         * `key` identifies the script: it is sent again only if the browser has not run it yet.
+         */
+    addScript(key: string, js: string): void;
     renderPartial(name: string, html: string): void;
     addError(path: string, message: string): void;
     resetErrorBag(): void;
@@ -86,6 +91,8 @@ export declare abstract class Component {
  * forged request and its return value sent back to the browser.
  */
 export declare function callableMethods(component: Component): Set<string>;
+/** Properties the browser may not change: those the class or any parent class lists in `static locked`. */
+export declare function lockedProperties(component: Component): Set<string>;
 export declare function publicProperties(component: Component): string[];
 export declare function dehydrateValue(value: unknown): unknown;
 export declare function hydrateValue(value: unknown): unknown;

package/lib/index.js

@@ -58,6 +58,11 @@ export class Component {
     }
     skipRender() { this._skipRender = true; }
     /** Partial render: only the `wire:partial="<name>"` fragment is sent back (effects.partials), the component is not re-rendered. */
+    /**
+         * JavaScript run once in the browser for this component, with `$wire` in scope (Livewire's `@script`). Call it while rendering;
+         * `key` identifies the script: it is sent again only if the browser has not run it yet.
+         */
+    addScript(key, js) { (this._effects.scripts ??= {})[key] = `<script>${js}</script>`; }
     renderPartial(name, html) { (this._effects.partials ??= {})[name] = html; this._skipRender = true; }
     addError(path, message) { (this._errors[path] ??= []).push(message); }
     resetErrorBag() { this._errors = {}; }
@@ -81,6 +86,16 @@ export function callableMethods(component) {
     }
     return out;
 }
+/** Properties the browser may not change: those the class or any parent class lists in `static locked`. */
+export function lockedProperties(component) {
+    const out = new Set();
+    for (let cls = component.constructor; cls && cls !== Component; cls = Object.getPrototypeOf(cls)) {
+        if (Object.prototype.hasOwnProperty.call(cls, 'locked') && Array.isArray(cls.locked))
+            for (const name of cls.locked)
+                out.add(name);
+    }
+    return out;
+}
 export function publicProperties(component) {
     return Object.keys(component).filter((k) => !k.startsWith('_'));
 }
@@ -238,7 +253,7 @@ export class WireRuntime {
         }
         await component.dehydrate();
         const snapshot = this.snapshot(component, name, {
-            path: request.path ?? '/', method: request.method ?? 'GET', release: 'a-a-a', children: Object.keys(component._children).length ? component._children : [], scripts: [], assets: [],
+            path: request.path ?? '/', method: request.method ?? 'GET', release: 'a-a-a', children: Object.keys(component._children).length ? component._children : [], scripts: Object.keys(component._effects.scripts ?? {}), assets: [],
             ...(request.lazy ? { lazyLoaded: false, lazyIsolated: true } : {}), ...(reactiveProps(component).length ? { props: reactiveProps(component) } : {}), locale: this.options.locale ?? 'en', islands: [],
         });
         const { html: _h, ...effects } = component._effects;
@@ -285,12 +300,13 @@ export class WireRuntime {
                     component[prop] = passed[prop];
         await component.boot();
         await component.hydrate();
+        const locked = lockedProperties(component);
         const applyUpdate = async (path, value) => {
             const segments = path.split('.');
             const prop = segments[0];
             if (!known.has(prop))
                 throw new WireError(404, `Public property not found: ${prop}`);
-            if (cls.locked?.includes(prop))
+            if (locked.has(prop))
                 throw new WireError(403, `Locked property: ${prop}`);
             if (reactive.has(prop))
                 throw new WireError(403, `Reactive property, set by the parent component: ${prop}`);
@@ -395,6 +411,17 @@ export class WireRuntime {
             memo.lazyLoaded = true;
             delete memo.lazyIsolated;
         }
+        // Scripts already run by the browser are not sent again.
+        if (effects.scripts) {
+            const known = new Set(Array.isArray(memo.scripts) ? memo.scripts : []);
+            const fresh = Object.fromEntries(Object.entries(effects.scripts).filter(([key]) => !known.has(key)));
+            if (Object.keys(fresh).length) {
+                effects.scripts = fresh;
+                memo.scripts = [...known, ...Object.keys(fresh)];
+            }
+            else
+                delete effects.scripts;
+        }
         return { snapshot: this.snapshot(component, name, memo), effects };
     }
     /** HTTP entry point; body: `{ _token, components: [{ snapshot, updates, calls }] }`. */

package/lib/uploads.js

@@ -135,6 +135,19 @@ async function detect(file, filename) {
         const { buffer, bytesRead } = await handle.read(Buffer.alloc(512), 0, 512, 0);
         const head = buffer.subarray(0, bytesRead);
         const known = SIGNATURES.find((signature) => signature.test(head));
+        if (known?.extension === 'zip') {
+            // Office documents are ZIP archives: their central directory (at the end) names their main part.
+            const { size } = await handle.stat();
+            const length = Math.min(size, 66 * 1024);
+            const { buffer: tail } = await handle.read(Buffer.alloc(length), 0, length, size - length);
+            const names = tail.toString('latin1');
+            if (names.includes('xl/workbook.xml'))
+                return { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extension: 'xlsx' };
+            if (names.includes('word/document.xml'))
+                return { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extension: 'docx' };
+            if (names.includes('ppt/presentation.xml'))
+                return { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extension: 'pptx' };
+        }
         if (known)
             return { type: known.type, extension: known.extension };
         const extension = path.extname(String(filename ?? '')).slice(1).toLowerCase();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/wire",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "Server-side runtime compatible with Livewire 3 for Node.js and Express.",
   "license": "MIT",
   "type": "module",