refactor: withStyles() => useStyles() (#220)

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@builder.io/qwik",
- "version": "0.0.16-13",
+ "version": "0.0.16",
  "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
  "scripts": {
  "build": "node scripts --tsc --build --api --platform-binding --wasm",

src/cli/package.json

@@ -1,6 +1,6 @@
 {
  "name": "create-qwik",
- "version": "0.0.16-13",
+ "version": "0.0.16",
  "description": "Interactive CLI and API for generating Qwik projects.",
  "bin": {
  "create-qwik": "create-qwik"

src/core/api.md

@@ -284,6 +284,12 @@ 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;
 
@@ -299,12 +305,6 @@ export const withScopedStyles$: (first: string) => void;
 // @alpha (undocumented)
 export function withScopedStyles(styles: QRL<string>): void;
 
-// @alpha (undocumented)
-export const withStyles$: (first: string) => void;
-
-// @alpha (undocumented)
-export function withStyles(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

src/core/component/component.public.ts

@@ -177,23 +177,23 @@ export function onWindow(event: string, eventFn: QRL<() => void>): QRL<() => voi
  throw new Error('IMPLEMENT: onWindow' + eventFn);
 }
 
-// <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withStyles">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withStyles instead)
+// <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#useStyles">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#useStyles instead)
 /**
  * @alpha
  */
 // </docs>
-export function withStyles(styles: QRL<string>): void {
- _withStyles(styles, false);
+export function useStyles(styles: QRL<string>): void {
+ _useStyles(styles, false);
 }
 
-// <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withStyles">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withStyles instead)
+// <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#useStyles">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#useStyles instead)
 /**
  * @alpha
  */
 // </docs>
-export const withStyles$ = implicit$FirstArg(withStyles);
+export const useStyles$ = implicit$FirstArg(useStyles);
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withScopedStyles">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!! (edit https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withScopedStyles instead)
@@ -202,7 +202,7 @@ export const withStyles$ = implicit$FirstArg(withStyles);
  */
 // </docs>
 export function withScopedStyles(styles: QRL<string>): void {
- _withStyles(styles, true);
+ _useStyles(styles, true);
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#withScopedStyles">
@@ -289,7 +289,7 @@ export interface ComponentOptions {
  * ```
  *
  * See also: `component`, `onUnmount`, `onHydrate`, `onDehydrate`, `onHalt`,
- * `onResume`, `on`, `onDocument`, `onWindow`, `withStyles`, `withScopedStyles`
+ * `onResume`, `on`, `onDocument`, `onWindow`, `useStyles`, `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
@@ -377,7 +377,7 @@ export function component<PROPS extends {}>(
  * ```
  *
  * See also: `component`, `onRender`, `onUnmount`, `onHydrate`, `onDehydrate`, `onHalt`,
- * `onResume`, `on`, `onDocument`, `onWindow`, `withStyles`, `withScopedStyles`
+ * `onResume`, `on`, `onDocument`, `onWindow`, `useStyles`, `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 +411,7 @@ function resolveQrl<PROPS extends {}>(
  });
 }
 
-function _withStyles(styles: QRL<string>, scoped: boolean) {
+function _useStyles(styles: QRL<string>, scoped: boolean) {
  const styleQrl = toQrlOrError(styles);
  const styleId = styleKey(styleQrl);
  const hostElement = useHostElement();

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, withStyles, component$ } from './component.public';
+import { PropsOf, useStyles, 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$(() => {
- withStyles(runtimeQrl(`{}`));
+ useStyles(runtimeQrl(`{}`));
  return $(() => {
  return <span>Hello World</span>;
  });

src/core/import/qrl.ts

@@ -87,8 +87,9 @@ export function stringifyQRL(qrl: QRL, element?: Element) {
  parts.push('|', key, value && value.length ? '.' + value.join('.') : '')
  );
  const capture = qrl_.capture;
- capture && capture.length && parts.push(JSON.stringify(capture));
-
+ if (capture && capture.length > 0) {
+ parts.push(JSON.stringify(capture));
+ }
  const qrlString = parts.join('');
  if (qrl_.chunk === RUNTIME_QRL && element) {
  const qrls: Set<QRL> = (element as any).__qrls__ || ((element as any).__qrls__ = new Set());

src/core/index.ts

@@ -23,8 +23,8 @@ export {
  on,
  onDocument,
  onWindow,
- withStyles,
- withStyles$,
+ useStyles,
+ useStyles$,
  withScopedStyles,
  withScopedStyles$,
 } from './component/component.public';

src/optimizer/core/src/snapshots/qwik_core__test__example_capture_imports.snap

@@ -7,14 +7,14 @@ expression: output
 ==INPUT==
 
 
-import { component$, withStyle$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import css1 from './global.css';
 import css2 from './style.css';
 import css3 from './style.css';
 
 export const App = component$(() => {
- withStyle$(`${css1}${css2}`);
- withStyle$(css3);
+ useStyles$(`${css1}${css2}`);
+ useStyles$(css3);
 })
 
 ============================= test.js ==
@@ -24,46 +24,46 @@ import { component } from "@builder.io/qwik";
 export const App = /*#__PURE__*/ component(qwik.qrl(()=>import("./h_test_app_onmount")
 , "App_onmount"));
 
-============================= h_test_app_withstyle.js (ENTRY POINT)==
+============================= h_test_app_usestyles.js (ENTRY POINT)==
 
 import * as qwik from "@builder.io/qwik";
 import css1 from "./global.css";
 import css2 from "./style.css";
-export const App_withStyle = `${css1}${css2}`;
+export const App_useStyles = `${css1}${css2}`;
 
 /*
 {
  "origin": "test.tsx",
- "name": "App_withStyle",
+ "name": "App_useStyles",
  "entry": null,
- "canonicalFilename": "h_test_app_withstyle",
+ "canonicalFilename": "h_test_app_usestyles",
  "extension": "js"
 }
 */
-============================= h_test_app_withstyle2.js (ENTRY POINT)==
+============================= h_test_app_usestyles2.js (ENTRY POINT)==
 
 import * as qwik from "@builder.io/qwik";
 import css3 from "./style.css";
-export const App_withStyle2 = css3;
+export const App_useStyles2 = css3;
 
 /*
 {
  "origin": "test.tsx",
- "name": "App_withStyle2",
+ "name": "App_useStyles2",
  "entry": null,
- "canonicalFilename": "h_test_app_withstyle2",
+ "canonicalFilename": "h_test_app_usestyles2",
  "extension": "js"
 }
 */
 ============================= h_test_app_onmount.js (ENTRY POINT)==
 
 import * as qwik from "@builder.io/qwik";
-import { withStyle } from "@builder.io/qwik";
+import { useStyles } from "@builder.io/qwik";
 export const App_onmount = ()=>{
- withStyle(qwik.qrl(()=>import("./h_test_app_withstyle")
- , "App_withStyle"));
- withStyle(qwik.qrl(()=>import("./h_test_app_withstyle2")
- , "App_withStyle2"));
+ useStyles(qwik.qrl(()=>import("./h_test_app_usestyles")
+ , "App_useStyles"));
+ useStyles(qwik.qrl(()=>import("./h_test_app_usestyles2")
+ , "App_useStyles2"));
 };
 
 /*

src/optimizer/core/src/snapshots/qwik_core__test__example_explicit_ext_no_transpile.snap

@@ -7,10 +7,10 @@ expression: output
 ==INPUT==
 
 
-import { component$, $, withStyle$ } from '@builder.io/qwik';
+import { component$, $, useStyles$ } from '@builder.io/qwik';
 
 export const App = component$((props) => {
- withStyle$('hola');
+ useStyles$('hola');
  return $(() => (
  <div></div>
  ));
@@ -23,17 +23,17 @@ import { component } from "@builder.io/qwik";
 export const App = /*#__PURE__*/ component(qwik.qrl(()=>import("./h_test_app_onmount.tsx")
 , "App_onmount"));
 
-============================= h_test_app_withstyle.tsx (ENTRY POINT)==
+============================= h_test_app_usestyles.tsx (ENTRY POINT)==
 
 import * as qwik from "@builder.io/qwik";
-export const App_withStyle = 'hola';
+export const App_useStyles = 'hola';
 
 /*
 {
  "origin": "test.tsx",
- "name": "App_withStyle",
+ "name": "App_useStyles",
  "entry": null,
- "canonicalFilename": "h_test_app_withstyle",
+ "canonicalFilename": "h_test_app_usestyles",
  "extension": "tsx"
 }
 */
@@ -55,10 +55,10 @@ export const App_onRender = ()=><div ></div>
 ============================= h_test_app_onmount.tsx (ENTRY POINT)==
 
 import * as qwik from "@builder.io/qwik";
-import { withStyle } from "@builder.io/qwik";
+import { useStyles } from "@builder.io/qwik";
 export const App_onmount = (props)=>{
- withStyle(qwik.qrl(()=>import("./h_test_app_withstyle.tsx")
- , "App_withStyle"));
+ useStyles(qwik.qrl(()=>import("./h_test_app_usestyles.tsx")
+ , "App_useStyles"));
  return qwik.qrl(()=>import("./h_test_app_onrender.tsx")
  , "App_onRender");
 };

src/optimizer/core/src/snapshots/qwik_core__test__example_explicit_ext_transpile.snap

@@ -7,10 +7,10 @@ expression: output
 ==INPUT==
 
 
-import { component$, $, withStyle$ } from '@builder.io/qwik';
+import { component$, $, useStyles$ } from '@builder.io/qwik';
 
 export const App = component$((props) => {
- withStyle$('hola');
+ useStyles$('hola');
  return $(() => (
  <div></div>
  ));
@@ -23,17 +23,17 @@ import { component } from "@builder.io/qwik";
 export const App = /*#__PURE__*/ component(qwik.qrl(()=>import("./h_test_app_onmount.js")
 , "App_onmount"));
 
-============================= h_test_app_withstyle.js (ENTRY POINT)==
+============================= h_test_app_usestyles.js (ENTRY POINT)==
 
 import * as qwik from "@builder.io/qwik";
-export const App_withStyle = 'hola';
+export const App_useStyles = 'hola';
 
 /*
 {
  "origin": "test.tsx",
- "name": "App_withStyle",
+ "name": "App_useStyles",
  "entry": null,
- "canonicalFilename": "h_test_app_withstyle",
+ "canonicalFilename": "h_test_app_usestyles",
  "extension": "js"
 }
 */
@@ -56,10 +56,10 @@ export const App_onRender = ()=>/*#__PURE__*/ _jsx("div", {})
 ============================= h_test_app_onmount.js (ENTRY POINT)==
 
 import * as qwik from "@builder.io/qwik";
-import { withStyle } from "@builder.io/qwik";
+import { useStyles } from "@builder.io/qwik";
 export const App_onmount = (props)=>{
- withStyle(qwik.qrl(()=>import("./h_test_app_withstyle.js")
- , "App_withStyle"));
+ useStyles(qwik.qrl(()=>import("./h_test_app_usestyles.js")
+ , "App_useStyles"));
  return qwik.qrl(()=>import("./h_test_app_onrender.js")
  , "App_onRender");
 };

src/optimizer/core/src/snapshots/qwik_core__test__example_invalid_hook_expr1.snap

@@ -7,13 +7,13 @@ expression: output
 ==INPUT==
 
 
-import { $, component$, withStyle$ } from '@builder.io/qwik';
+import { $, component$, useStyles$ } from '@builder.io/qwik';
 import css1 from './global.css';
 import css2 from './style.css';
 
 export const App = component$(() => {
  const style = `${css1}${css2}`;
- withStyle$(style);
+ useStyles$(style);
  const render = () => {
  return (
  <div></div>
@@ -29,17 +29,17 @@ import { component } from "@builder.io/qwik";
 export const App = /*#__PURE__*/ component(qwik.qrl(()=>import("./h_test_app_onmount")
 , "App_onmount"));
 
-============================= h_test_app_withstyle.js (ENTRY POINT)==
+============================= h_test_app_usestyles.js (ENTRY POINT)==
 
 import * as qwik from "@builder.io/qwik";
-export const App_withStyle = style;
+export const App_useStyles = style;
 
 /*
 {
  "origin": "test.tsx",
- "name": "App_withStyle",
+ "name": "App_useStyles",
  "entry": null,
- "canonicalFilename": "h_test_app_withstyle",
+ "canonicalFilename": "h_test_app_usestyles",
  "extension": "js"
 }
 */
@@ -63,11 +63,11 @@ import { jsx as _jsx } from "@builder.io/qwik/jsx-runtime";
 import * as qwik from "@builder.io/qwik";
 import css1 from "./global.css";
 import css2 from "./style.css";
-import { withStyle } from "@builder.io/qwik";
+import { useStyles } from "@builder.io/qwik";
 export const App_onmount = ()=>{
  const style = `${css1}${css2}`;
- withStyle(qwik.qrl(()=>import("./h_test_app_withstyle")
- , "App_withStyle"));
+ useStyles(qwik.qrl(()=>import("./h_test_app_usestyles")
+ , "App_useStyles"));
  const render = ()=>{
  return(/*#__PURE__*/ _jsx("div", {}));
  };