@qwik.dev/core 2.0.0-beta.11 → 2.0.0-beta.14

package/dist/qwikloader.debug.js

@@ -2,6 +2,7 @@ const doc = document;
 const win = window;
 const events = /* @__PURE__ */ new Set();
 const roots = /* @__PURE__ */ new Set([doc]);
+const symbols = {};
 let hasInitialized;
 const nativeQuerySelectorAll = (root, selector) => Array.from(root.querySelectorAll(selector));
 const querySelectorAll = (query) => {
@@ -101,6 +102,8 @@ const dispatch = async (element, scope, ev, eventName = ev.type) => {
           importError = "sync";
           error = new Error("sym:" + symbol);
         }
+      } else if (symbol in symbols) {
+        handler = symbols[symbol];
       } else {
         emitEvent("qsymbol", eventData);
         const uri = url.href.split("#")[0];
@@ -114,6 +117,8 @@ const dispatch = async (element, scope, ev, eventName = ev.type) => {
           if (!handler) {
             importError = "no-symbol";
             error = new Error(`${symbol} not in ${uri}`);
+          } else {
+            symbols[symbol] = handler;
           }
         } catch (err) {
           importError || (importError = "async");
@@ -149,7 +154,7 @@ const dispatch = async (element, scope, ev, eventName = ev.type) => {
 const emitEvent = (eventName, detail) => {
   doc.dispatchEvent(createEvent(eventName, detail));
 };
-const camelToKebab = (str) => str.replace(/([A-Z])/g, (a) => "-" + a.toLowerCase());
+const camelToKebab = (str) => str.replace(/([A-Z-])/g, (a) => "-" + a.toLowerCase());
 const processDocumentEvent = async (ev) => {
   let type = camelToKebab(ev.type);
   let element = ev.target;
@@ -192,21 +197,22 @@ const processReadyStateChange = () => {
 const addEventListener = (el, eventName, handler, capture = false) => {
   el.addEventListener(eventName, handler, { capture, passive: false });
 };
+const kebabToCamel = (eventName) => eventName.replace(/-./g, (a) => a[1].toUpperCase());
 const processEventOrNode = (...eventNames) => {
   for (const eventNameOrNode of eventNames) {
     if (typeof eventNameOrNode === "string") {
       if (!events.has(eventNameOrNode)) {
-        roots.forEach(
-          (root) => addEventListener(root, eventNameOrNode, processDocumentEvent, true)
-        );
-        addEventListener(win, eventNameOrNode, processWindowEvent, true);
         events.add(eventNameOrNode);
+        const eventName = kebabToCamel(eventNameOrNode);
+        roots.forEach((root) => addEventListener(root, eventName, processDocumentEvent, true));
+        addEventListener(win, eventName, processWindowEvent, true);
       }
     } else {
       if (!roots.has(eventNameOrNode)) {
-        events.forEach(
-          (eventName) => addEventListener(eventNameOrNode, eventName, processDocumentEvent, true)
-        );
+        events.forEach((kebabEventName) => {
+          const eventName = kebabToCamel(kebabEventName);
+          addEventListener(eventNameOrNode, eventName, processDocumentEvent, true);
+        });
         roots.add(eventNameOrNode);
       }
     }

package/dist/qwikloader.js

@@ -1 +1 @@
-const t=document,e=window,n=new Set,o=new Set([t]);let r;const s=(t,e)=>Array.from(t.querySelectorAll(e)),a=t=>{const e=[];return o.forEach(n=>e.push(...s(n,t))),e},i=t=>{m(t),s(t,"[q\\:shadowroot]").forEach(t=>{const e=t.shadowRoot;e&&i(e)})},c=t=>t&&"function"==typeof t.then,l=(t,e,n=e.type)=>{a("[on"+t+"\\:"+n+"]").forEach(o=>{u(o,t,e,n)})},f=e=>{if(void 0===e._qwikjson_){let n=(e===t.documentElement?t.body:e).lastElementChild;for(;n;){if("SCRIPT"===n.tagName&&"qwik/json"===n.getAttribute("type")){e._qwikjson_=JSON.parse(n.textContent.replace(/\\x3C(\/?script)/gi,"<$1"));break}n=n.previousElementSibling}}},p=(t,e)=>new CustomEvent(t,{detail:e}),u=async(e,n,o,r=o.type)=>{const s="on"+n+":"+r;e.hasAttribute("preventdefault:"+r)&&o.preventDefault(),e.hasAttribute("stoppropagation:"+r)&&o.stopPropagation();const a=e._qc_,i=a&&a.li.filter(t=>t[0]===s);if(i&&i.length>0){for(const t of i){const n=t[1].getFn([e,o],()=>e.isConnected)(o,e),r=o.cancelBubble;c(n)&&await n,r&&o.stopPropagation()}return}const l=e.getAttribute(s),p=e.qDispatchEvent;if(p)return p(o,n);if(l){const n=e.closest("[q\\:container]:not([q\\:container=html]):not([q\\:container=text])"),r=n.getAttribute("q:base"),s=n.getAttribute("q:version")||"unknown",a=n.getAttribute("q:manifest-hash")||"dev",i=new URL(r,t.baseURI);for(const p of l.split("\n")){const l=new URL(p,i),u=l.href,q=l.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",h=performance.now();let _,d,y;const m=p.startsWith("#"),w={qBase:r,qManifest:a,qVersion:s,href:u,symbol:q,element:e,reqTime:h};if(m){const e=n.getAttribute("q:instance");_=(t["qFuncs_"+e]||[])[Number.parseInt(q)],_||(d="sync",y=Error("sym:"+q))}else{b("qsymbol",w);const t=l.href.split("#")[0];try{const e=import(t);f(n),_=(await e)[q],_||(d="no-symbol",y=Error(`${q} not in ${t}`))}catch(t){d||(d="async"),y=t}}if(!_){b("qerror",{importError:d,error:y,...w}),console.error(y);break}const g=t.__q_context__;if(e.isConnected)try{t.__q_context__=[e,o,l];const n=_(o,e);c(n)&&await n}catch(t){b("qerror",{error:t,...w})}finally{t.__q_context__=g}}}},b=(e,n)=>{t.dispatchEvent(p(e,n))},q=t=>t.replace(/([A-Z])/g,t=>"-"+t.toLowerCase()),h=async t=>{let e=q(t.type),n=t.target;for(l("-document",t,e);n&&n.getAttribute;){const o=u(n,"",t,e);let r=t.cancelBubble;c(o)&&await o,r||(r=r||t.cancelBubble||n.hasAttribute("stoppropagation:"+t.type)),n=t.bubbles&&!0!==r?n.parentElement:null}},_=t=>{l("-window",t,q(t.type))},d=()=>{const s=t.readyState;if(!r&&("interactive"==s||"complete"==s)&&(o.forEach(i),r=1,b("qinit"),(e.requestIdleCallback??e.setTimeout).bind(e)(()=>b("qidle")),n.has("qvisible"))){const t=a("[on\\:qvisible]"),e=new IntersectionObserver(t=>{for(const n of t)n.isIntersecting&&(e.unobserve(n.target),u(n.target,"",p("qvisible",n)))});t.forEach(t=>e.observe(t))}},y=(t,e,n,o=!1)=>{t.addEventListener(e,n,{capture:o,passive:!1})},m=(...t)=>{for(const r of t)"string"==typeof r?n.has(r)||(o.forEach(t=>y(t,r,h,!0)),y(e,r,_,!0),n.add(r)):o.has(r)||(n.forEach(t=>y(r,t,h,!0)),o.add(r))};if(!("__q_context__"in t)){t.__q_context__=0;const r=e.qwikevents;r&&(Array.isArray(r)?m(...r):m("click","input")),e.qwikevents={events:n,roots:o,push:m},y(t,"readystatechange",d),d()}
+const t=document,e=window,n=new Set,o=new Set([t]),r={};let s;const i=(t,e)=>Array.from(t.querySelectorAll(e)),a=t=>{const e=[];return o.forEach(n=>e.push(...i(n,t))),e},c=t=>{w(t),i(t,"[q\\:shadowroot]").forEach(t=>{const e=t.shadowRoot;e&&c(e)})},l=t=>t&&"function"==typeof t.then,f=(t,e,n=e.type)=>{a("[on"+t+"\\:"+n+"]").forEach(o=>{b(o,t,e,n)})},p=e=>{if(void 0===e._qwikjson_){let n=(e===t.documentElement?t.body:e).lastElementChild;for(;n;){if("SCRIPT"===n.tagName&&"qwik/json"===n.getAttribute("type")){e._qwikjson_=JSON.parse(n.textContent.replace(/\\x3C(\/?script)/gi,"<$1"));break}n=n.previousElementSibling}}},u=(t,e)=>new CustomEvent(t,{detail:e}),b=async(e,n,o,s=o.type)=>{const i="on"+n+":"+s;e.hasAttribute("preventdefault:"+s)&&o.preventDefault(),e.hasAttribute("stoppropagation:"+s)&&o.stopPropagation();const a=e._qc_,c=a&&a.li.filter(t=>t[0]===i);if(c&&c.length>0){for(const t of c){const n=t[1].getFn([e,o],()=>e.isConnected)(o,e),r=o.cancelBubble;l(n)&&await n,r&&o.stopPropagation()}return}const f=e.getAttribute(i),u=e.qDispatchEvent;if(u)return u(o,n);if(f){const n=e.closest("[q\\:container]:not([q\\:container=html]):not([q\\:container=text])"),s=n.getAttribute("q:base"),i=n.getAttribute("q:version")||"unknown",a=n.getAttribute("q:manifest-hash")||"dev",c=new URL(s,t.baseURI);for(const u of f.split("\n")){const f=new URL(u,c),b=f.href,h=f.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",_=performance.now();let d,y,g;const m=u.startsWith("#"),w={qBase:s,qManifest:a,qVersion:i,href:b,symbol:h,element:e,reqTime:_};if(m){const e=n.getAttribute("q:instance");d=(t["qFuncs_"+e]||[])[Number.parseInt(h)],d||(y="sync",g=Error("sym:"+h))}else if(h in r)d=r[h];else{q("qsymbol",w);const t=f.href.split("#")[0];try{const e=import(t);p(n),d=(await e)[h],d?r[h]=d:(y="no-symbol",g=Error(`${h} not in ${t}`))}catch(t){y||(y="async"),g=t}}if(!d){q("qerror",{importError:y,error:g,...w}),console.error(g);break}const v=t.__q_context__;if(e.isConnected)try{t.__q_context__=[e,o,f];const n=d(o,e);l(n)&&await n}catch(t){q("qerror",{error:t,...w})}finally{t.__q_context__=v}}}},q=(e,n)=>{t.dispatchEvent(u(e,n))},h=t=>t.replace(/([A-Z-])/g,t=>"-"+t.toLowerCase()),_=async t=>{let e=h(t.type),n=t.target;for(f("-document",t,e);n&&n.getAttribute;){const o=b(n,"",t,e);let r=t.cancelBubble;l(o)&&await o,r||(r=r||t.cancelBubble||n.hasAttribute("stoppropagation:"+t.type)),n=t.bubbles&&!0!==r?n.parentElement:null}},d=t=>{f("-window",t,h(t.type))},y=()=>{const r=t.readyState;if(!s&&("interactive"==r||"complete"==r)&&(o.forEach(c),s=1,q("qinit"),(e.requestIdleCallback??e.setTimeout).bind(e)(()=>q("qidle")),n.has("qvisible"))){const t=a("[on\\:qvisible]"),e=new IntersectionObserver(t=>{for(const n of t)n.isIntersecting&&(e.unobserve(n.target),b(n.target,"",u("qvisible",n)))});t.forEach(t=>e.observe(t))}},g=(t,e,n,o=!1)=>{t.addEventListener(e,n,{capture:o,passive:!1})},m=t=>t.replace(/-./g,t=>t[1].toUpperCase()),w=(...t)=>{for(const r of t)if("string"==typeof r){if(!n.has(r)){n.add(r);const t=m(r);o.forEach(e=>g(e,t,_,!0)),g(e,t,d,!0)}}else o.has(r)||(n.forEach(t=>{const e=m(t);g(r,e,_,!0)}),o.add(r))};if(!("__q_context__"in t)){t.__q_context__=0;const r=e.qwikevents;r&&(Array.isArray(r)?w(...r):w("click","input")),e.qwikevents={events:n,roots:o,push:w},g(t,"readystatechange",y),y()}

package/dist/server.d.ts

@@ -245,18 +245,12 @@ declare interface QwikBundle {
 declare type QwikBundleGraph = Array<string | number>;
 
 /** @public */
-export declare interface QwikLoaderOptions {
-    /**
-     * Whether to include the qwikloader script in the document. Normally you don't need to worry
-     * about this, but in case of multi-container apps using different Qwik versions, you might want
-     * to only enable it on one of the containers.
-     *
-     * Defaults to `'auto'`.
-     */
+export declare type QwikLoaderOptions = 'module' | 'inline' | 'never' | {
+    /** @deprecated No longer used. */
     include?: 'always' | 'never' | 'auto';
-    /** @deprecated No longer used, the qwikloader is always loaded as soon as possible */
+    /** @deprecated No longer used. */
     position?: 'top' | 'bottom';
-}
+};
 
 /**
  * The metadata of the build. One of its uses is storing where QRL symbols are located.
@@ -351,11 +345,25 @@ export declare interface RenderOptions extends SerializeDocumentOptions {
     /** Language to use when rendering the document. */
     locale?: string | ((options: RenderOptions) => string);
     /**
-     * Specifies if the Qwik Loader script is added to the document or not.
+     * Specifies how the Qwik Loader is included in the document. This enables interactivity and lazy
+     * loading.
+     *
+     * `module`: Use a `<script>` tag to load the Qwik Loader. Subsequent page loads will have the
+     * script cached and instantly running.
+     *
+     * `inline`: This embeds the Qwik Loader script directly in the document. This adds about 3kB
+     * before compression, which typically is reduced to about 1.6kB with gzip.
+     *
+     * `never`: Do not include the Qwik Loader script. This is mostly useful when embedding multiple
+     * containers on the same page.
+     *
+     * Defaults to `module`.
      *
-     * Defaults to `{ include: true }`.
+     * Note that the Qwik Loader is absolutely required for Qwik to work. There must be an instance of
+     * it loaded for any interactivity to happen.
      */
     qwikLoader?: QwikLoaderOptions;
+    /** Specifies how preloading is handled. This ensures that code is instantly available when needed. */
     preloader?: PreloaderOptions | false;
     /** @deprecated Use `preloader` instead */
     prefetchStrategy?: PrefetchStrategy | null;