@builder.io/qwik - npm Package Compare versions

Comparing version 0.0.12-0 to 0.0.12-pre.1

jsx-runtime.d.ts

 export { jsx, jsxs, jsxDEV, Fragment } from './core';
-export type { JSXInternal as JSX } from './core';
+export type { QwikJSX as JSX } from './core';

optimizer.d.ts

@@ -72,2 +72,11 @@
 
+/**
+ * Provides the prefetch.js file as a string. Useful for tooling to inline the prefetch
+ * script into HTML.
+ * @alpha
+ */
+export declare function getQwikPrefetchScript(opts?: {
+    debug?: boolean;
+}): string;
+
 declare type Mode = 'development' | 'production';
@@ -194,12 +203,2 @@
 
-/**
- * Utility function to async write files to disk.
- * @public
- */
-export declare function writeOutput(opts: {
-    dir: string;
-    files: OutputFile[];
-    emptyDir?: boolean;
-}): Promise<void>;
-
 export { }

package.json

 {
   "name": "@builder.io/qwik",
-  "version": "0.0.12-0",
+  "version": "0.0.12-pre.1",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
@@ -28,4 +28,4 @@ "license": "MIT",
     "./server": {
-      "import": "./testing/index.mjs",
-      "require": "./testing/index.cjs"
+      "import": "./server/index.mjs",
+      "require": "./server/index.cjs"
     },
@@ -55,2 +55,4 @@ "./testing": {
     "package.json",
+    "prefetch.debug.js",
+    "prefetch.js",
     "qwikloader.debug.js",
@@ -78,7 +80,3 @@ "qwikloader.js",
     "testing/jest-preset.mjs",
-    "testing/jest-preset.mjs.map",
-    "testing/jest-setuptestframework.cjs",
-    "testing/jest-setuptestframework.cjs.map",
-    "testing/jest-setuptestframework.mjs",
-    "testing/jest-setuptestframework.mjs.map"
+    "testing/jest-preset.mjs.map"
   ],
@@ -119,4 +117,4 @@ "contributors": [
   "engines": {
-    "node": ">= 14.14"
+    "node": ">=10"
   }
 }

qwikloader.debug.js

@@ -1,15 +0,32 @@
-const qwikLoader = (doc, hasInitialized) => {
-    const getModuleUrl = (eventUrl, linkElm, href) => eventUrl ? new URL(eventUrl.replace(/^(\w+):(\/)?/, ((str, protocol, slash) => {
+const qrlResolver = (doc, eventUrl, linkElm, href, url) => {
+    eventUrl && ((url = new URL(eventUrl.replace(/^(\w+):(\/)?/, ((str, protocol, slash) => {
         linkElm = doc.querySelector(`[rel="q.protocol.${protocol}"]`);
         (href = linkElm && linkElm.href) || error(protocol + " not defined");
         return href + (href.endsWith("/") ? "" : slash || "");
-    })), doc.baseURI) : 0;
+    })), doc.baseURI)).pathname += ".js");
+    return url;
+};
+
+const error = msg => {
+    throw new Error("QWIK: " + msg);
+};
+
+const qwikLoader = (doc, hasInitialized) => {
+    const broadcast = async (type, event) => {
+        doc.querySelectorAll("[on\\:" + type.replace(":", "\\:") + "]").forEach((target => dispatch(target, type, event)));
+    };
+    const dispatch = async (element, eventName, ev, url) => {
+        if (url = qrlResolver(doc, element.getAttribute("on:" + eventName))) {
+            getModuleExport(url, window[url.pathname] || await import(String(url)))(element, ev, url);
+        }
+    };
     const getModuleExport = (url, module, exportName) => module[exportName = url.hash.replace(/^#?([^?]*).*$/, "$1") || "default"] || error(url + " does not export " + exportName);
-    const processEvent = async (ev, element, url) => {
-        element = ev.target;
-        while (element && element.getAttribute) {
-            if (url = getModuleUrl(element.getAttribute("on:" + ev.type))) {
-                getModuleExport(url, await import(url.pathname += ".js"))(element, ev, url);
+    const processEvent = async (ev, element) => {
+        if ((element = ev.target) == doc) {
+            setTimeout((() => broadcast("document:" + ev.type, ev)));
+        } else {
+            while (element && element.getAttribute) {
+                dispatch(element, ev.type, ev);
+                element = element.parentElement;
             }
-            element = element.parentElement;
         }
@@ -24,8 +41,5 @@ };
             hasInitialized = 1;
-            doc.querySelectorAll("[on\\:\\q-init]").forEach((target => target.dispatchEvent(new CustomEvent("q-init"))));
+            broadcast("q-init", new CustomEvent("qInit"));
         }
     };
-    const error = msg => {
-        throw new Error("QWIK: " + msg);
-    };
     {
@@ -43,7 +57,5 @@ const scriptTag = doc.querySelector("script[events]");
     }
-    addEventListener("q-init");
     doc.addEventListener("readystatechange", processReadyStateChange);
     processReadyStateChange();
     return {
-        getModuleUrl: getModuleUrl,
         getModuleExport: getModuleExport,
@@ -50,0 +62,0 @@ processReadyStateChange: processReadyStateChange

qwikloader.js

@@ -1,1 +0,1 @@
-((e,t)=>{const r=(t,r,n)=>t?new URL(t.replace(/^(\w+):(\/)?/,((t,o,a)=>(r=e.querySelector(`[rel="q.protocol.${o}"]`),(n=r&&r.href)||c(o+" not defined"),n+(n.endsWith("/")?"":a||"")))),e.baseURI):0,n=(e,t,r)=>t[r=e.hash.replace(/^#?([^?]*).*$/,"$1")||"default"]||c(e+" does not export "+r),o=async(e,t,o)=>{for(t=e.target;t&&t.getAttribute;)(o=r(t.getAttribute("on:"+e.type)))&&n(o,await import(o.pathname+=".js"))(t,e,o),t=t.parentElement},a=t=>e.addEventListener(t,o,{capture:!0}),i="q-init",s=r=>{r=e.readyState,t||"interactive"!=r&&"complete"!=r||(t=1,e.querySelectorAll("[on\\:\\q-init]").forEach((e=>e.dispatchEvent(new CustomEvent(i)))))},c=e=>{throw Error("QWIK: "+e)};{const t=e.querySelector("script[events]");if(t)(t.getAttribute("events")||"").split(/[\s,;]+/).forEach(a);else for(const t in e)0==t.indexOf("on")&&a(t.substring(2))}a(i),e.addEventListener("readystatechange",s),s()})(document);
+const error=e=>{throw Error("QWIK: "+e)};((e,t)=>{const r=async(t,r)=>{e.querySelectorAll("[on\\:"+t.replace(":","\\:")+"]").forEach((e=>n(e,t,r)))},n=async(t,r,n,a)=>{(a=((e,t,r,n,o)=>(t&&((o=new URL(t.replace(/^(\w+):(\/)?/,((t,o,a)=>(r=e.querySelector(`[rel="q.protocol.${o}"]`),(n=r&&r.href)||error(o+" not defined"),n+(n.endsWith("/")?"":a||"")))),e.baseURI)).pathname+=".js"),o))(e,t.getAttribute("on:"+r)))&&o(a,window[a.pathname]||await import(a+""))(t,n,a)},o=(e,t,r)=>t[r=e.hash.replace(/^#?([^?]*).*$/,"$1")||"default"]||error(e+" does not export "+r),a=async(t,o)=>{if((o=t.target)==e)setTimeout((()=>r("document:"+t.type,t)));else for(;o&&o.getAttribute;)n(o,t.type,t),o=o.parentElement},s=t=>e.addEventListener(t,a,{capture:!0}),c=n=>{n=e.readyState,t||"interactive"!=n&&"complete"!=n||(t=1,r("q-init",new CustomEvent("qInit")))};{const t=e.querySelector("script[events]");if(t)(t.getAttribute("events")||"").split(/[\s,;]+/).forEach(s);else for(const t in e)0==t.indexOf("on")&&s(t.substring(2))}e.addEventListener("readystatechange",c),c()})(document);

qwikloader.optimize.debug.js

@@ -1,15 +0,32 @@
-const qwikLoader = (doc, hasInitialized) => {
-    const getModuleUrl = (eventUrl, linkElm, href) => eventUrl ? new URL(eventUrl.replace(/^(\w+):(\/)?/, ((str, protocol, slash) => {
+const qrlResolver = (doc, eventUrl, linkElm, href, url) => {
+    eventUrl && ((url = new URL(eventUrl.replace(/^(\w+):(\/)?/, ((str, protocol, slash) => {
         linkElm = doc.querySelector(`[rel="q.protocol.${protocol}"]`);
         (href = linkElm && linkElm.href) || error(protocol + " not defined");
         return href + (href.endsWith("/") ? "" : slash || "");
-    })), doc.baseURI) : 0;
+    })), doc.baseURI)).pathname += ".js");
+    return url;
+};
+
+const error = msg => {
+    throw new Error("QWIK: " + msg);
+};
+
+const qwikLoader = (doc, hasInitialized) => {
+    const broadcast = async (type, event) => {
+        doc.querySelectorAll("[on\\:" + type.replace(":", "\\:") + "]").forEach((target => dispatch(target, type, event)));
+    };
+    const dispatch = async (element, eventName, ev, url) => {
+        if (url = qrlResolver(doc, element.getAttribute("on:" + eventName))) {
+            getModuleExport(url, window[url.pathname] || await import(String(url)))(element, ev, url);
+        }
+    };
     const getModuleExport = (url, module, exportName) => module[exportName = url.hash.replace(/^#?([^?]*).*$/, "$1") || "default"] || error(url + " does not export " + exportName);
-    const processEvent = async (ev, element, url) => {
-        element = ev.target;
-        while (element && element.getAttribute) {
-            if (url = getModuleUrl(element.getAttribute("on:" + ev.type))) {
-                getModuleExport(url, await import(url.pathname += ".js"))(element, ev, url);
+    const processEvent = async (ev, element) => {
+        if ((element = ev.target) == doc) {
+            setTimeout((() => broadcast("document:" + ev.type, ev)));
+        } else {
+            while (element && element.getAttribute) {
+                dispatch(element, ev.type, ev);
+                element = element.parentElement;
             }
-            element = element.parentElement;
         }
@@ -24,14 +41,9 @@ };
             hasInitialized = 1;
-            doc.querySelectorAll("[on\\:\\q-init]").forEach((target => target.dispatchEvent(new CustomEvent("q-init"))));
+            broadcast("q-init", new CustomEvent("qInit"));
         }
     };
-    const error = msg => {
-        throw new Error("QWIK: " + msg);
-    };
-    globalThis.qEvents.forEach(addEventListener);
-    addEventListener("q-init");
+    window.qEvents.forEach(addEventListener);
     doc.addEventListener("readystatechange", processReadyStateChange);
     processReadyStateChange();
     return {
-        getModuleUrl: getModuleUrl,
         getModuleExport: getModuleExport,
@@ -38,0 +50,0 @@ processReadyStateChange: processReadyStateChange

qwikloader.optimize.js

@@ -1,1 +0,1 @@
-((e,t)=>{const r=(t,r,a)=>t?new URL(t.replace(/^(\w+):(\/)?/,((t,n,o)=>(r=e.querySelector(`[rel="q.protocol.${n}"]`),(a=r&&r.href)||s(n+" not defined"),a+(a.endsWith("/")?"":o||"")))),e.baseURI):0,a=(e,t,r)=>t[r=e.hash.replace(/^#?([^?]*).*$/,"$1")||"default"]||s(e+" does not export "+r),n=async(e,t,n)=>{for(t=e.target;t&&t.getAttribute;)(n=r(t.getAttribute("on:"+e.type)))&&a(n,await import(n.pathname+=".js"))(t,e,n),t=t.parentElement},o=t=>e.addEventListener(t,n,{capture:!0}),i="q-init",c=r=>{r=e.readyState,t||"interactive"!=r&&"complete"!=r||(t=1,e.querySelectorAll("[on\\:\\q-init]").forEach((e=>e.dispatchEvent(new CustomEvent(i)))))},s=e=>{throw Error("QWIK: "+e)};globalThis.qEvents.forEach(o),o(i),e.addEventListener("readystatechange",c),c()})(document);
+const error=e=>{throw Error("QWIK: "+e)};((e,t)=>{const r=async(t,r)=>{e.querySelectorAll("[on\\:"+t.replace(":","\\:")+"]").forEach((e=>n(e,t,r)))},n=async(t,r,n,a)=>{(a=((e,t,r,n,o)=>(t&&((o=new URL(t.replace(/^(\w+):(\/)?/,((t,o,a)=>(r=e.querySelector(`[rel="q.protocol.${o}"]`),(n=r&&r.href)||error(o+" not defined"),n+(n.endsWith("/")?"":a||"")))),e.baseURI)).pathname+=".js"),o))(e,t.getAttribute("on:"+r)))&&o(a,window[a.pathname]||await import(a+""))(t,n,a)},o=(e,t,r)=>t[r=e.hash.replace(/^#?([^?]*).*$/,"$1")||"default"]||error(e+" does not export "+r),a=async(t,o)=>{if((o=t.target)==e)setTimeout((()=>r("document:"+t.type,t)));else for(;o&&o.getAttribute;)n(o,t.type,t),o=o.parentElement},c=n=>{n=e.readyState,t||"interactive"!=n&&"complete"!=n||(t=1,r("q-init",new CustomEvent("qInit")))};window.qEvents.forEach((t=>e.addEventListener(t,a,{capture:!0}))),e.addEventListener("readystatechange",c),c()})(document);

README.md

@@ -20,4 +20,6 @@ <br />
 
+- [HTML-first, JavaScript last: the secret to web speed!](https://dev.to/mhevery/html-first-javascript-last-the-secret-to-web-speed-4ic9)
 - [A first look at Qwik - the HTML first framework](https://dev.to/mhevery/a-first-look-at-qwik-the-html-first-framework-af)
 - [Death by Closure (and how Qwik solves it)](https://dev.to/mhevery/death-by-closure-and-how-qwik-solves-it-44jj)
+- [Qwik: the answer to optimal fine-grained lazy loading](https://dev.to/mhevery/qwik-the-answer-to-optimal-fine-grained-lazy-loading-2hdp)
 
@@ -32,2 +34,3 @@ ## Development
 - Join our [Discord](https://discord.gg/JHVpZmqSs4) community.
+- Join our [weekly office hours](https://calendar.google.com/calendar/u/0?cid=Y180ZG91YjR2NTZ1cW43YmgzbW1oZGJ2M3R2c0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t)
 
@@ -34,0 +37,0 @@ ---

server/index.d.ts

@@ -26,2 +26,25 @@ import { FunctionComponent } from '../core';
 /**
+ * Returns a set of imports for a given source file.
+ *
+ * The function recursively visits the dependencies and returns a fully populated graph.
+ *
+ * This does not take dynamic imports into the account and so it produces an incomplete list.
+ *
+ * @param filePath - File path to read
+ * @param readFileFn - a function used to retrieve the contents of a file at a given `filePath`
+ * @alpha
+ */
+export declare function getImports(filePath: string, readFileFn?: (path: string) => Promise<string>): Promise<string[]>;
+
+/**
+ * Provides the qwikloader.js file as a string. Useful for tooling to inline the qwikloader
+ * script into HTML.
+ * @alpha
+ */
+export declare function getQwikLoaderScript(opts?: {
+    events?: string[];
+    debug?: boolean;
+}): string;
+
+/**
  * Options when creating a mock Qwik Global object.
@@ -72,2 +95,14 @@ * @public
  */
+export declare const QwikPrefetch: FunctionComponent<QwikPrefetchProps>;
+
+/**
+ * @alpha
+ */
+declare interface QwikPrefetchProps {
+    debug?: boolean;
+}
+
+/**
+ * @alpha
+ */
 declare interface QwikProtocolProps {
@@ -93,3 +128,3 @@ protocols?: {
  */
-export declare function renderToDocument(doc: Document, rootNode: any, opts?: RenderToStringOptions): Promise<void>;
+export declare function renderToDocument(doc: Document, rootNode: any, opts?: RenderToDocumentOptions): Promise<void>;
 
@@ -148,21 +183,2 @@ /**
 /**
- * @license
- * Copyright Builder.io, Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
- */
-/**
- * Serialize the `Injector` state into the DOM.
- *
- * This function locates all of the injectors (which are child of `element`) and serializes their
- * state into the DOM. This prepares the DOM for dehydration.
- *
- *
- * @param element - `Element` (or `Document`) where injectors should be found and serialized.
- * @public
- */
-export declare function serializeState(element: Element | Document): void;
-
-/**
  * Applies NodeJS specific platform APIs to the passed in document instance.
@@ -169,0 +185,0 @@ * @public

testing/index.d.ts

@@ -26,2 +26,25 @@ import { FunctionComponent } from '../core';
 /**
+ * Returns a set of imports for a given source file.
+ *
+ * The function recursively visits the dependencies and returns a fully populated graph.
+ *
+ * This does not take dynamic imports into the account and so it produces an incomplete list.
+ *
+ * @param filePath - File path to read
+ * @param readFileFn - a function used to retrieve the contents of a file at a given `filePath`
+ * @alpha
+ */
+export declare function getImports(filePath: string, readFileFn?: (path: string) => Promise<string>): Promise<string[]>;
+
+/**
+ * Provides the qwikloader.js file as a string. Useful for tooling to inline the qwikloader
+ * script into HTML.
+ * @alpha
+ */
+export declare function getQwikLoaderScript(opts?: {
+    events?: string[];
+    debug?: boolean;
+}): string;
+
+/**
  * Options when creating a mock Qwik Global object.
@@ -72,2 +95,14 @@ * @public
  */
+export declare const QwikPrefetch: FunctionComponent<QwikPrefetchProps>;
+
+/**
+ * @alpha
+ */
+declare interface QwikPrefetchProps {
+    debug?: boolean;
+}
+
+/**
+ * @alpha
+ */
 declare interface QwikProtocolProps {
@@ -93,3 +128,3 @@ protocols?: {
  */
-export declare function renderToDocument(doc: Document, rootNode: any, opts?: RenderToStringOptions): Promise<void>;
+export declare function renderToDocument(doc: Document, rootNode: any, opts?: RenderToDocumentOptions): Promise<void>;
 
@@ -148,21 +183,2 @@ /**
 /**
- * @license
- * Copyright Builder.io, Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
- */
-/**
- * Serialize the `Injector` state into the DOM.
- *
- * This function locates all of the injectors (which are child of `element`) and serializes their
- * state into the DOM. This prepares the DOM for dehydration.
- *
- *
- * @param element - `Element` (or `Document`) where injectors should be found and serialized.
- * @public
- */
-export declare function serializeState(element: Element | Document): void;
-
-/**
  * Applies NodeJS specific platform APIs to the passed in document instance.
@@ -169,0 +185,0 @@ * @public

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3635222

increased by133.84%

Lines of code

29456

increased by150.75%

Number of lines in readme file

40

increased by8.11%

Worsened metrics

Number of package files

41

decreased by-4.65%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

23

increased by130%

No dependency changes