chore: cleanup work to make Qwik REST API work (QwikDev#240)

* chore(bazel): upgrade `build_bazel_rules_nodejs` to v4.6.1 * feat(store): warn if non-serializable date gets attached to store * chore: cleanup work to make Qwik REST API work
Kesmek · Mar 1, 2022 · 82c867a · 82c867a
1 parent c0ad450
commit 82c867a
Show file tree

Hide file tree

Showing 21 changed files with 145 additions and 93 deletions.
diff --git a/WORKSPACE b/WORKSPACE
@@ -8,21 +8,13 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Fetch rules_nodejs so we can install our npm dependencies
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "1134ec9b7baee008f1d54f0483049a97e53a57cd3913ec9d6db625549c98395a",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/3.4.0/rules_nodejs-3.4.0.tar.gz"],
+    sha256 = "d63ecec7192394f5cc4ad95a115f8a6c9de55c60d56c1f08da79c306355e4654",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.6.1/rules_nodejs-4.6.1.tar.gz"],
 )
 
-# Check the rules_nodejs version and download npm dependencies
-# Note: bazel (version 2 and after) will check the .bazelversion file so we don't need to
-# assert on that.
-load("@build_bazel_rules_nodejs//:index.bzl", "check_rules_nodejs_version", "node_repositories", "yarn_install")
-
-check_rules_nodejs_version(minimum_version_string = "2.2.0")
-
-# Setup the Node.js toolchain
+load("@build_bazel_rules_nodejs//:index.bzl", "node_repositories", "npm_install", "yarn_install")
 node_repositories(
-    package_json = ["//:package.json"],
-    node_version = "16.6.2",
+    node_version = "16.6.2", # This version is much higher, but it is needed to make bazel work for Apple M1
 )
 
 yarn_install(

diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@bazel/bazelisk": "1.7.5",
     "@bazel/ibazel": "0.15.10",
-    "@bazel/typescript": "3.5.0",
+    "@bazel/typescript": "4.6.1",
     "@builder.io/partytown": "0.3.5",
     "@builder.io/qwik-dom": "2.1.7",
     "@microsoft/api-extractor": "7.19.4",

diff --git a/scripts/docs_sync/main.ts b/scripts/docs_sync/main.ts
@@ -37,8 +37,10 @@ async function scanForDocDirective(dir: string, file: string, lines: string[]) {
       const prefix = match[1];
       const ref = match[2];
       const section = match[3];
+      const bookRef = ref.replace(/\/\/hackmd.io\//, '//hackmd.io/@qwik-docs/BkxpSz80Y/%2F');
       output.push(
-        prefix + `// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit ${ref}#${section} instead)`
+        prefix +
+          `// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!\n// (edit ${bookRef}%3Fboth#${section} instead)`
       );
       output.push(prefix + '/**');
       (await resolveComment(dir, ref, section)).forEach((longLine) =>

diff --git a/scripts/package_build.bzl b/scripts/package_build.bzl
@@ -31,6 +31,7 @@ def package_build(
             "@npm//cross-spawn",
             "@npm//gzip-size",
             "@npm//execa",
+            "@npm//vite",
             "@npm//@napi-rs/triples",
             "@npm//@types/semver",
             "@npm//semver",

diff --git a/src/core/api.md b/src/core/api.md
@@ -272,7 +272,7 @@ export const setPlatform: (doc: Document, plt: CorePlatform) => CorePlatform;
 // @public (undocumented)
 export const Slot: FunctionComponent<{
     name?: string;
-    children?: JSXChildren;
+    children?: any;
 }>;
 
 // @public
@@ -284,12 +284,6 @@ export function useHostElement(): Element;
 // @public
 export function useLexicalScope<VARS extends any[]>(): VARS;
 
-// @alpha (undocumented)
-export const useStyles$: (first: string) => void;
-
-// @alpha (undocumented)
-export function useStyles(styles: QRL<string>): void;
-
 // @public (undocumented)
 export function useTransient<OBJ, ARGS extends any[], RET>(obj: OBJ, factory: (this: OBJ, ...args: ARGS) => RET, ...args: ARGS): RET;
 
@@ -305,9 +299,11 @@ export const withScopedStyles$: (first: string) => void;
 // @alpha (undocumented)
 export function withScopedStyles(styles: QRL<string>): void;
 
-// Warnings were encountered during analysis:
-//
-// dist-dev/tsc-out/src/core/render/jsx/slot.public.d.ts:8:5 - (ae-forgotten-export) The symbol "JSXChildren" needs to be exported by the entry point index.d.ts
+// @alpha (undocumented)
+export const withStyles$: (first: string) => void;
+
+// @alpha (undocumented)
+export function withStyles(styles: QRL<string>): void;
 
 // (No @packageDocumentation comment for this package)
 

diff --git a/src/core/component/component.public.ts b/src/core/component/component.public.ts
@@ -13,7 +13,8 @@ import type { QwikEvents } from '../render/jsx/types/jsx-qwik-attributes';
 import type { ValueOrPromise } from '../util/types';
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onUnmount">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onUnmount instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onUnmount instead)
 /**
  * A lazy-loadable reference to a component's destroy hook.
  *
@@ -27,7 +28,8 @@ export function onUnmount(unmountFn: QRL<() => void>): void {
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onUnmount">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onUnmount instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onUnmount instead)
 /**
  * A lazy-loadable reference to a component's destroy hook.
  *
@@ -39,7 +41,8 @@ export function onUnmount(unmountFn: QRL<() => void>): void {
 export const onUnmount$ = implicit$FirstArg(onUnmount);
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onResume">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onResume instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onResume instead)
 /**
  * A lazy-loadable reference to a component's on resume hook.
  *
@@ -54,7 +57,8 @@ export function onResume(resumeFn: QRL<() => void>): void {
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onResume">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onResume instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onResume instead)
 /**
  * A lazy-loadable reference to a component's on resume hook.
  *
@@ -67,7 +71,8 @@ export function onResume(resumeFn: QRL<() => void>): void {
 export const onResume$ = implicit$FirstArg(onResume);
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onHydrate">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onHydrate instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onHydrate instead)
 /**
  * A lazy-loadable reference to a component's on hydrate hook.
  *
@@ -82,7 +87,8 @@ export function onHydrate(hydrateFn: QRL<() => void>): void {
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onHydrate">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onHydrate instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onHydrate instead)
 /**
  * A lazy-loadable reference to a component's on hydrate hook.
  *
@@ -95,7 +101,8 @@ export function onHydrate(hydrateFn: QRL<() => void>): void {
 export const onHydrate$ = implicit$FirstArg(onHydrate);
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onDehydrate">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onDehydrate instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onDehydrate instead)
 /**
  * A lazy-loadable reference to a component's on dehydrate hook.
  *
@@ -112,7 +119,8 @@ export function onDehydrate(dehydrateFn: QRL<() => void>): void {
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onDehydrate">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onDehydrate instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onDehydrate instead)
 /**
  * A lazy-loadable reference to a component's on dehydrate hook.
  *
@@ -127,7 +135,8 @@ export function onDehydrate(dehydrateFn: QRL<() => void>): void {
 export const onDehydrate$ = implicit$FirstArg(onDehydrate);
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#on">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#on instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#on instead)
 /**
  * Register a listener on the current component's host element.
  *
@@ -144,7 +153,8 @@ export function on(event: string, eventFn: QRL<() => void>): QRL<() => void> {
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onDocument">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onDocument instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onDocument instead)
 /**
  * Register a listener on `document`.
  *
@@ -161,7 +171,8 @@ export function onDocument(event: string, eventFn: QRL<() => void>): QRL<() => v
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onWindow">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onWindow instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#onWindow instead)
 /**
  * Register a listener on `window`.
  *
@@ -177,36 +188,40 @@ export function onWindow(event: string, eventFn: QRL<() => void>): QRL<() => voi
   throw new Error('IMPLEMENT: onWindow' + eventFn);
 }
 
-// <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#useStyles">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#useStyles instead)
+// <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withStyles">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#withStyles instead)
 /**
  * @alpha
  */
 // </docs>
-export function useStyles(styles: QRL<string>): void {
-  _useStyles(styles, false);
+export function withStyles(styles: QRL<string>): void {
+  _withStyles(styles, false);
 }
 
-// <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#useStyles">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#useStyles instead)
+// <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withStyles">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#withStyles instead)
 /**
  * @alpha
  */
 // </docs>
-export const useStyles$ = implicit$FirstArg(useStyles);
+export const withStyles$ = implicit$FirstArg(withStyles);
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withScopedStyles">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withScopedStyles instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#withScopedStyles instead)
 /**
  * @alpha
  */
 // </docs>
 export function withScopedStyles(styles: QRL<string>): void {
-  _useStyles(styles, true);
+  _withStyles(styles, true);
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withScopedStyles">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withScopedStyles instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#withScopedStyles instead)
 /**
  * @alpha
  */
@@ -239,7 +254,8 @@ export interface ComponentOptions {
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#component">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#component instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#component instead)
 /**
  * Declare a Qwik component that can be used to create UI.
  *
@@ -255,7 +271,7 @@ export interface ComponentOptions {
  * implementation of the component to be eagerly loaded. A minimum Qwik definition consists of:
  *
  * - Component `onMount` method, which needs to return an
- * - `$` closure which constructs the component's JSX.
+ * - `onRender` closure which constructs the component's JSX.
  *
  * ### Example:
  *
@@ -277,7 +293,6 @@ export interface ComponentOptions {
  * - `{ value?: number; step?: number }` declares the public (props) interface of the component.
  * - `{ count: number }` declares the private (state) interface of the component.
  * - `onMount` closure: is used to create the data store (see: `createStore`);
- * - `onRender$`: is the required hook for rendering the component.
  * - `$`: mark which parts of the component will be lazy-loaded. (see `$` for details.)
  *
  * The above can then be used like so:
@@ -288,8 +303,8 @@ export interface ComponentOptions {
  * });
  * ```
  *
- * See also: `component`, `onUnmount`, `onHydrate`, `onDehydrate`, `onHalt`,
- * `onResume`, `on`, `onDocument`, `onWindow`, `useStyles`, `withScopedStyles`
+ * See also: `component`, `onUnmount`, `onHydrate`, `onDehydrate`, `onHalt`, `onResume`, `on`,
+ * `onDocument`, `onWindow`, `withStyles`, `withScopedStyles`
  *
  * @param onMount - Initialization closure used when the component is first created.
  * @param tagName - Optional components options. It can be used to set a custom tag-name to be
@@ -327,7 +342,8 @@ export function component<PROPS extends {}>(
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#component">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#component instead)
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit https://hackmd.io/@qwik-docs/BkxpSz80Y/%2Fc_nNpiLZSYugTU0c5JATJA%3Fboth#component instead)
 /**
  * Declare a Qwik component that can be used to create UI.
  *
@@ -365,7 +381,6 @@ export function component<PROPS extends {}>(
  * - `{ value?: number; step?: number }` declares the public (props) interface of the component.
  * - `{ count: number }` declares the private (state) interface of the component.
  * - `onMount` closure: is used to create the data store (see: `createStore`);
- * - `onRender$`: is the required hook for rendering the component.
  * - `$`: mark which parts of the component will be lazy-loaded. (see `$` for details.)
  *
  * The above can then be used like so:
@@ -376,8 +391,8 @@ export function component<PROPS extends {}>(
  * });
  * ```
  *
- * See also: `component`, `onRender`, `onUnmount`, `onHydrate`, `onDehydrate`, `onHalt`,
- * `onResume`, `on`, `onDocument`, `onWindow`, `useStyles`, `withScopedStyles`
+ * See also: `component`, `onUnmount`, `onHydrate`, `onDehydrate`, `onHalt`, `onResume`, `on`,
+ * `onDocument`, `onWindow`, `withStyles`, `withScopedStyles`
  *
  * @param onMount - Initialization closure used when the component is first created.
  * @param tagName - Optional components options. It can be used to set a custom tag-name to be
@@ -411,7 +426,7 @@ function resolveQrl<PROPS extends {}>(
       });
 }
 
-function _useStyles(styles: QRL<string>, scoped: boolean) {
+function _withStyles(styles: QRL<string>, scoped: boolean) {
   const styleQrl = toQrlOrError(styles);
   const styleId = styleKey(styleQrl);
   const hostElement = useHostElement();

diff --git a/src/core/component/component.unit.tsx b/src/core/component/component.unit.tsx
@@ -4,7 +4,7 @@ import { expectDOM } from '../../testing/expect-dom.unit';
 import { runtimeQrl } from '../import/qrl';
 import { $ } from '../import/qrl.public';
 import { render } from '../render/render.public';
-import { PropsOf, useStyles, component$ } from './component.public';
+import { PropsOf, withStyles, component$ } from './component.public';
 
 describe('q-component', () => {
   it('should declare and render basic component', async () => {
@@ -87,7 +87,7 @@ describe('q-component', () => {
 
 /////////////////////////////////////////////////////////////////////////////
 export const HelloWorld = component$(() => {
-  useStyles(runtimeQrl(`{}`));
+  withStyles(runtimeQrl(`{}`));
   return $(() => {
     return <span>Hello World</span>;
   });

diff --git a/src/core/error/error.ts b/src/core/error/error.ts
@@ -11,6 +11,7 @@ import { qDev } from '../util/qdev';
 
 export const enum QError {
   // core 000-099
+  TODO = 0, // Temporary ID until we create a propr error code.
   Core_qConfigNotFound_path = 1,
   Core_unrecognizedStack_frame = 2,
   Core_noAttribute_atr1_element = 3,
@@ -95,6 +96,7 @@ function codeToText(code: QError): string {
     7: 'EVENT-ERROR',
   }[Math.floor(code / 100)];
   const text = {
+    [QError.TODO]: '{}',
     [QError.Core_qConfigNotFound_path]: "QConfig not found in path '{}'.",
     [QError.Core_unrecognizedStack_frame]: "Unrecognized stack format '{}'",
     [QError.Core_noAttribute_atr1_element]: