create-qwik 0.0.33 → 0.0.34-dev20220701233003

package/starters/apps/qwik-city/src/pages/blog/resumable.mdx

@@ -1,107 +0,0 @@
----
-title: Resumable
----
-
-# Resumable vs. Hydration
-
-A key concept of Qwik applications is that they are resumable from server-side-rendered state. The best way to explain resumability is to understand how the current generation of frameworks are replayable (hydration).
-
-When an SSR/SSG application boots up on a client, it requires that the framework on the client restore two pieces of information:
-
-1. Locate event listeners and install them on the DOM nodes to make the application interactive;
-2. Build up an internal data structure representing the application component tree.
-3. Restore the application state.
-
-Collectively, this is known as hydration. All current generations of frameworks require this step to make the application interactive.
-
-[Hydration is expensive](https://www.builder.io/blog/hydration-is-pure-overhead) for two reasons:
-
-1. The frameworks have to download all of the component code associated with the current page.
-2. The frameworks have to execute the templates associated with the components on the page to rebuild the listener location and the internal component tree.
-
-![Resumable vs Hydration](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F04681212764f4025b2b5f5c6a258ad6e?format=webp&width=2000)
-
-Qwik is different because it does not require hydration to resume an application on the client. Not requiring hydration is what makes the Qwik application startup instantaneous.
-
-All frameworks hydration **replay** all the application logic in the client, instead Qwik pauses execution in the server, and resumes execution in the client,
-
-# Introducing Resumability
-
-Resumability is about pausing execution in the server, and resuming execution in the client without having to replay and download all of the application logic.
-
-A good mental model is that Qwik applications at any point in their lifecycle can be serialized and moved to a different VM instance. (Server to browser). There, the application simply resumes where the serialization stopped. No hydration is required. This is why we say that Qwik applications don't hydrate; they resume.
-
-In order to achieve this, qwik needs to solve the 3 problems (listeners, component tree, application state) in a way that is compatible with a no-code startup.
-
-## Listeners
-
-DOM without event listeners is just a static page; it is not an application. Today's standard for all sites is quite a high level of interactivity, so even the most static-looking sites are full of event listeners. These include menus, hovers, expanding details, or even full-on interactive apps.
-
-Existing frameworks solve the event listener by downloading the components and executing their templates to collect event listeners that are then attached to the DOM. The current approach has these issues:
-
-1. Requires the template code to be eagerly downloaded;
-2. Requires template code to be eagerly executed;
-3. Requires the event handler code to be downloaded eagerly (to be attached.)
-
-The above approach does not scale. As the application becomes more complicated, the amount of code needed to download eagerly and execute grows proportionally with the size of the application. This negatively impacts the application startup performance and hence the user experience.
-
-Qwik solves the above issue by serializing the event listens into DOM like so:
-
-```html
-<button onClickQrl="./chunk.js#handler_symbol">click me</button>
-```
-
-Qwik still needs to collect the listener information, but this step is done as part of the SSR/SSG. The results of SSR/SSG are then serialized into HTML so that the browser does not need to do anything to resume the execution. Notice that the `onClickQrl` attribute contains all of the information to resume the application without doing anything eagerly.
-
-1. Qwikloader sets up a single global listener instead of many individual listeners per DOM element. This step can be done with no application code present.
-2. The HTML contains a URL to the chunk and symbol name. The attribute tells Qwikloader which code chunk to download and which symbol to retrieve from the chunk.
-3. Finally, to make all of the above possible, Qwik's event processing implementation understands asynchronicity which allows insertion of asynchronous lazy loading.
-
-## Component Trees
-
-Frameworks work with component trees. To that end, frameworks need a complete understanding of the component trees to know which components need to be rerendered and when. If you look into the existing framework SSR/SSG output, the component boundary information has been destroyed. There is no way of knowing where component boundaries are by looking at the resulting HTML. To recreate this information, frameworks re-execute the component templates and memoize the component boundary location. Re-execution is what hydration is. Hydration is expensive as it requires both the download of component templates and their execution.
-
-Qwik collects component boundary information as part of the SSR/SSG and then serializes that information into HTML. The result is that Qwik can:
-
-1. Rebuild the component hierarchy information without the component code actually being present. The component code can remain lazy.
-2. Qwik can do this lazily only for the components which need to be rerendered rather than all upfront.
-3. Qwik collects relationship information between stores and components. This creates a subscription model that informs Qwik which components need to be re-rendered as a result of state change. The subscription information also gets serialized into HTML.
-
-## Application State
-
-Existing frameworks usually have a way of serializing the application state into HTML so that the state can be restored as part of hydration. In this way, they are very similar to Qwik. However, Qwik has state management more tightly integrated into the lifecycle of the components. In practice, this means that component can be delayed loaded independently from the state of the component. This is not easily achievable in existing frameworks because component props are usually created by the parent component. This creates a chain reaction. In order to restore component X, its parents need to be restored as well. Qwik allows any component to be resumed without the parent component code being present.
-
-### Serialization
-
-The simplest way to think about serialization is through `JSON.stringify`. However, JSON has several limitations. Qwik can overcome some limitations, but some can't be overcome, and they place limitations on what the developer can do. Understanding these limitations is important when building Qwik applications.
-
-Limitations of JSON which Qwik solves:
-
-- JSON produces DAG. DAG stands for directed acyclic graph, which means that the object which is being serialized can't have circular references. This is a big limitation because the application state is often circular. Qwik ensures that when the graph of objects gets serialized, the circular references get properly saved and then restored.
-- JSON can't serialize some object types. For example, DOM references, Dates, etc... Qwik serialization format ensures that such objects can correctly be serialized and restored. Here is a list of types that can be serialized with Qwik:
-  - DOM references
-  - Dates (not yet implemented)
-  - Function closures (if wrapped in QRL).
-
-Limitations of JSON that Qwik does not solve:
-
-- Serialization of classes (`instanceof` and prototype)
-- Serialization of `Promise`s, Streams, etc...
-
-## Writing applications with serializability in mind
-
-The resumability property of the framework must extend to resumability of the application as well. This means that the framework must provide mechanisms for the developer to express Components and Entities of the applications in a way which can be serialized and then resumed (without re-bootstrapping). This necessitates that applications are written with resumability constraints in mind. It is simply not possible for developers to continue to write applications in a heap-centric way and expect that a better framework can somehow make up for this sub-optimal approach.
-
-Developers must write their applications in a DOM-centric way. This will require a change of behavior and retooling of web-developers skills. Frameworks need to provide guidance and APIs to make it easy for developers to write the applications in this way.
-
-## Other benefits of resumability
-
-The most obvious benefit of using resumability is for server-side-rendering. However, there are secondary benefits:
-
-- Serializing existing PWA apps so that users don't loose context when they return to the application
-- Improved rendering performance because only changed components need to be re-rendered
-- Fine-grained-lazy loading
-- Decreased memory pressure, especially on mobile devices
-- Progressive interactivity of existing static websites
-
-Reactivity is a key component of Qwik. Reactivity allows Qwik to track which components are subscribed to which state. This information enables Qwik to invalidate only the relevant component on state change, which minimizes the number of components that need to be rerendered. Without reactivity, a state change would require rerendering from the root component, which would force the whole component tree to be eagerly downloaded.

package/starters/apps/starter/package.json

@@ -1,10 +0,0 @@
-{
-  "description": "Blank Qwik starter app.",
-  "__qwik__": {
-    "priority": 0,
-    "featureOptions": [
-      "prettier",
-      "tailwindcss"
-    ]
-  }
-}

package/starters/apps/starter/src/entry.ssr.tsx

@@ -1,15 +0,0 @@
-import { renderToString, RenderOptions } from '@builder.io/qwik/server';
-import { manifest } from '@qwik-client-manifest';
-import { Root } from './root';
-
-/**
- * Server-Side Render method to be called by a server.
- */
-export function render(opts?: RenderOptions) {
-  // Render the Root component to a string
-  // Pass in the manifest that was generated from the client build
-  return renderToString(<Root />, {
-    manifest,
-    ...opts,
-  });
-}

package/starters/apps/starter/src/global.css

@@ -1,3 +0,0 @@
-/**
- * Write here your global css styles
- */

package/starters/apps/starter-partytown/package.json

@@ -1,13 +0,0 @@
-{
-  "description": "Blank Qwik starter app with Partytown.",
-  "dependencies": {
-    "@builder.io/partytown": "latest"
-  },
-  "__qwik__": {
-    "priority": 0,
-    "featureOptions": [
-      "prettier",
-      "tailwindcss"
-    ]
-  }
-}

package/starters/apps/starter-partytown/src/components/app/app.tsx

@@ -1,89 +0,0 @@
-import { component$, useStore } from '@builder.io/qwik';
-
-export const App = component$(() => {
-  const state = useStore({ name: 'World', running: true });
-
-  return (
-    <div id="my-app" onDocumentExpensiveComputationDone$={() => (state.running = false)}>
-      <p style={{ 'text-align': 'center' }}>
-        <a href="https://github.com/builderio/qwik">
-          <img
-            alt="Qwik Logo"
-            width={400}
-            src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
-          />
-        </a>
-      </p>
-      <p class="congrats">
-        Congratulations <a href="https://github.com/builderio/qwik">Qwik</a> with{' '}
-        <a href="https://partytown.builder.io/">Partytown</a> is working!
-      </p>
-
-      <p>
-        Expensive script running in <a href="https://partytown.builder.io/">Partytown</a> is{' '}
-        {state.running ? (
-          <span style={{ 'background-color': 'red', color: 'white', padding: '.1em' }}>
-            running
-          </span>
-        ) : (
-          <span style={{ 'background-color': 'green', color: 'white', padding: '.1em' }}>
-            finished
-          </span>
-        )}
-        .
-      </p>
-
-      <p>Next steps:</p>
-      <ol>
-        <li>
-          Open dev-tools network tab and notice that no JavaScript was downloaded by the main thread
-          to render this page. (<code>partytown.js</code> is used to execute things of main thread
-          and not for rendering the application.)
-        </li>
-        <li>
-          Partytown executes <code>&lt;script&gt;</code> tag that contains a simulation of expensive
-          script. The expensive script simplation keeps the web-worker thread busy for 2.5 seconds,
-          leaving main-thread free for user interactions. (Without Partytown the script would block
-          the main thread resulting in poor user experience.)
-        </li>
-        <li>
-          Once the expensive operation is finished it dispatches custom event (
-          <code>expensiveComputationDone</code>) that this component listens on. It is only at that
-          time that Qwik lazy-loads the component render function and updates the UI. (See network
-          tab.)
-        </li>
-        <li>
-          Try interacting with this component by changing{' '}
-          <input
-            value={state.name}
-            onKeyUp$={(event) => {
-              const input = event.target as HTMLInputElement;
-              state.name = input.value;
-            }}
-          ></input>
-          .
-        </li>
-        <li>
-          Observe that the binding changes: <code>Hello {state.name}!</code>
-        </li>
-        <li>
-          Notice that Qwik automatically lazily-loaded and resumed the component upon interaction
-          without the developer having to code that behavior. (Lazy hydration is what gives even
-          large apps instant on behavior.)
-        </li>
-        <li>
-          Read the docs <a href="https://github.com/builderio/qwik">here</a>.
-        </li>
-        <li>Replace the content of this component with your code.</li>
-        <li>Build amazing web-sites with unbeatable startup performance.</li>
-      </ol>
-      <hr />
-      <p style={{ 'text-align': 'center' }}>
-        Made with ❤️ by{' '}
-        <a target="_blank" href="https://www.builder.io/">
-          Builder.io
-        </a>
-      </p>
-    </div>
-  );
-});

package/starters/apps/starter-partytown/src/entry.ssr.tsx

@@ -1,16 +0,0 @@
-import { renderToString, RenderOptions } from '@builder.io/qwik/server';
-import { manifest } from '@qwik-client-manifest';
-import { Root } from './root';
-
-/**
- * Qwik server-side render function.
- */
-export function render(opts: RenderOptions) {
-  return renderToString(<Root />, {
-    manifest,
-    qwikLoader: {
-      events: ['click', 'keyup', 'expensiveComputationDone'],
-    },
-    ...opts,
-  });
-}

package/starters/apps/starter-partytown/src/root.tsx

@@ -1,36 +0,0 @@
-import { App } from './components/app/app';
-import { partytownSnippet } from '@builder.io/partytown/integration';
-
-import './global.css';
-
-export const Root = () => {
-  return (
-    <html>
-      <head>
-        <meta charSet="utf-8" />
-        <title>Qwik + Partytown Blank App</title>
-        <script children={partytownSnippet({ debug: true })} />
-      </head>
-      <body>
-        <App />
-        <script type="text/partytown">
-          ({partyTownExampleWhichBlocksMainThreadForOneSecond.toString()})()
-        </script>
-      </body>
-    </html>
-  );
-};
-
-function partyTownExampleWhichBlocksMainThreadForOneSecond() {
-  // Block execution for 1 second.
-  const start = new Date().getTime();
-  // eslint-disable-next-line no-console
-  console.log('Expensive computation started at:', start);
-  let end = 0;
-  while (end < start + 2500) {
-    end = new Date().getTime();
-  }
-  // eslint-disable-next-line no-console
-  console.log('Expensive computation ended at:', end);
-  document.dispatchEvent(new Event('expensiveComputationDone', { bubbles: true }));
-}

package/starters/apps/todo/package.json

@@ -1,7 +0,0 @@
-{
-  "description": "Qwik implementation of TodoMVC: https://todomvc.com/.",
-  "__qwik__": {
-    "priority": -2,
-    "featureOptions": []
-  }
-}

package/starters/apps/todo/src/components/app/app.tsx

@@ -1,39 +0,0 @@
-import { component$, useStyles$, useStore, useContextProvider } from '@builder.io/qwik';
-import { Footer } from '../footer/footer';
-import { Header } from '../header/header';
-import { Body } from '../body/body';
-import { TODOS, Todos } from '../../state/state';
-import styles from './index.css?inline';
-
-/**
- * Overall application component.
- *
- * This component is static (meaning it will never change). Because of this
- * Qwik knows that it should never need to be rerendered, and its code will never
- * download to the client.
- */
-export const App = component$(() => {
-  useStyles$(styles);
-
-  const todos = useStore<Todos>(
-    {
-      filter: 'all',
-      items: [
-        { completed: false, title: 'Read Qwik docs', id: '0' },
-        { completed: false, title: 'Build HelloWorld', id: '1' },
-        { completed: false, title: 'Profit', id: '2' },
-      ],
-      nextItemId: 3,
-    },
-    { recursive: true }
-  );
-  useContextProvider(TODOS, todos);
-
-  return (
-    <section class="todoapp">
-      <Header />
-      <Body />
-      <Footer />
-    </section>
-  );
-});

package/starters/apps/todo/src/components/app/base.css

@@ -1,141 +0,0 @@
-hr {
-  margin: 20px 0;
-  border: 0;
-  border-top: 1px dashed #c5c5c5;
-  border-bottom: 1px dashed #f7f7f7;
-}
-
-.learn a {
-  font-weight: normal;
-  text-decoration: none;
-  color: #b83f45;
-}
-
-.learn a:hover {
-  text-decoration: underline;
-  color: #787e7e;
-}
-
-.learn h3,
-.learn h4,
-.learn h5 {
-  margin: 10px 0;
-  font-weight: 500;
-  line-height: 1.2;
-  color: #000;
-}
-
-.learn h3 {
-  font-size: 24px;
-}
-
-.learn h4 {
-  font-size: 18px;
-}
-
-.learn h5 {
-  margin-bottom: 0;
-  font-size: 14px;
-}
-
-.learn ul {
-  padding: 0;
-  margin: 0 0 30px 25px;
-}
-
-.learn li {
-  line-height: 20px;
-}
-
-.learn p {
-  font-size: 15px;
-  font-weight: 300;
-  line-height: 1.3;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-#issue-count {
-  display: none;
-}
-
-.quote {
-  border: none;
-  margin: 20px 0 60px 0;
-}
-
-.quote p {
-  font-style: italic;
-}
-
-.quote p:before {
-  content: '“';
-  font-size: 50px;
-  opacity: 0.15;
-  position: absolute;
-  top: -20px;
-  left: 3px;
-}
-
-.quote p:after {
-  content: '”';
-  font-size: 50px;
-  opacity: 0.15;
-  position: absolute;
-  bottom: -42px;
-  right: 3px;
-}
-
-.quote footer {
-  position: absolute;
-  bottom: -40px;
-  right: 0;
-}
-
-.quote footer img {
-  border-radius: 3px;
-}
-
-.quote footer a {
-  margin-left: 5px;
-  vertical-align: middle;
-}
-
-.speech-bubble {
-  position: relative;
-  padding: 10px;
-  background: rgba(0, 0, 0, 0.04);
-  border-radius: 5px;
-}
-
-.speech-bubble:after {
-  content: '';
-  position: absolute;
-  top: 100%;
-  right: 30px;
-  border: 13px solid transparent;
-  border-top-color: rgba(0, 0, 0, 0.04);
-}
-
-.learn-bar > .learn {
-  position: absolute;
-  width: 272px;
-  top: 8px;
-  left: -300px;
-  padding: 10px;
-  border-radius: 5px;
-  background-color: rgba(255, 255, 255, 0.6);
-  transition-property: left;
-  transition-duration: 500ms;
-}
-
-@media (min-width: 899px) {
-  .learn-bar {
-    width: auto;
-    padding-left: 300px;
-  }
-
-  .learn-bar > .learn {
-    left: 8px;
-  }
-}