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", {}));
     };