perf: optimize props destructuring (#2545)

Author: manucorporat

.npmrc

@@ -2,3 +2,4 @@ engine-strict=true
 strict-peer-dependencies=false
 shell-emulator=true
 auto-install-peers=false
+ignore-workspace-root-check=true

package.json

@@ -59,31 +59,31 @@
     "@napi-rs/triples": "1.1.0",
     "@node-rs/helper": "1.3.3",
     "@octokit/action": "3.18.1",
-    "@playwright/test": "1.29.0",
+    "@playwright/test": "1.29.1",
     "@types/brotli": "1.3.1",
     "@types/cross-spawn": "6.0.2",
     "@types/eslint": "8.4.10",
     "@types/express": "4.17.15",
     "@types/mri": "1.1.1",
-    "@types/node": "^18.11.16",
+    "@types/node": "^18.11.18",
     "@types/node-fetch": "2.6.2",
     "@types/path-browserify": "1.0.0",
-    "@types/prettier": "2.7.1",
+    "@types/prettier": "2.7.2",
     "@types/prompts": "2.4.2",
     "@types/semver": "7.3.13",
     "@types/which-pm-runs": "1.0.0",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
-    "@typescript-eslint/parser": "5.46.1",
-    "@typescript-eslint/utils": "5.46.1",
+    "@typescript-eslint/eslint-plugin": "5.48.0",
+    "@typescript-eslint/parser": "5.48.0",
+    "@typescript-eslint/utils": "5.48.0",
     "all-contributors-cli": "6.24.0",
     "brotli": "1.3.3",
     "commitizen": "4.2.6",
     "concurrently": "7.6.0",
     "create-qwik": "workspace:*",
     "cross-spawn": "7.0.3",
     "cz-conventional-changelog": "3.3.0",
-    "esbuild": "0.16.8",
-    "eslint": "8.30.0",
+    "esbuild": "0.16.12",
+    "eslint": "8.31.0",
     "eslint-plugin-no-only-tests": "3.1.0",
     "execa": "6.1.0",
     "express": "4.18.2",
@@ -96,15 +96,15 @@
     "prettier": "2.8.1",
     "pretty-quick": "^3.1.3",
     "prompts": "2.4.2",
-    "rollup": "3.7.4",
+    "rollup": "3.9.1",
     "semver": "7.3.8",
     "snoop": "^1.0.4",
     "terser": "5.16.1",
     "tsm": "2.2.2",
     "typescript": "4.9.4",
     "undici": "5.14.0",
     "uvu": "0.5.6",
-    "vite": "4.0.1",
+    "vite": "4.0.3",
     "vite-tsconfig-paths": "4.0.3",
     "watchlist": "0.3.1",
     "which-pm-runs": "1.1.0"

packages/docs/package.json

@@ -43,7 +43,7 @@
     "typescript": "4.9.4",
     "undici": "5.14.0",
     "uvu": "0.5.6",
-    "vite": "4.0.1",
+    "vite": "4.0.3",
     "wrangler": "^2.6.2"
   },
   "author": "Builder.io Team",

packages/eslint-plugin-qwik/qwik.unit.ts

@@ -302,7 +302,7 @@ export default component$(() => {
             return <div></div>
           });`,
         errors: [
-          'Identifier ("useMethod") can not be captured inside the scope (component$) because it\'s declared at the root of the module and it is not exported. Add export. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'Identifier ("useMethod") can not be captured inside the scope (component$) because it\'s declared at the root of the module and it is not exported. Add export. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
       {
@@ -318,7 +318,7 @@ export default component$(() => {
             return <div></div>;
           });`,
         errors: [
-          'Identifier ("useMethod") can not be captured inside the scope (useTask$) because it is a function, which is not serializable. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'Identifier ("useMethod") can not be captured inside the scope (useTask$) because it is a function, which is not serializable. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
       {
@@ -334,7 +334,7 @@ export default component$(() => {
           });`,
 
         errors: [
-          'Identifier ("useMethod") can not be captured inside the scope (useTask$) because it is a function, which is not serializable. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'Identifier ("useMethod") can not be captured inside the scope (useTask$) because it is a function, which is not serializable. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
       {
@@ -348,7 +348,7 @@ export default component$(() => {
           });`,
 
         errors: [
-          'Identifier ("Stuff") can not be captured inside the scope (useTask$) because it is a class constructor, which is not serializable. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'Identifier ("Stuff") can not be captured inside the scope (useTask$) because it is a class constructor, which is not serializable. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
       {
@@ -363,7 +363,7 @@ export default component$(() => {
           });`,
 
         errors: [
-          'Identifier ("stuff") can not be captured inside the scope (useTask$) because it is an instance of the "Stuff" class, which is not serializable. Use a simple object literal instead. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'Identifier ("stuff") can not be captured inside the scope (useTask$) because it is an instance of the "Stuff" class, which is not serializable. Use a simple object literal instead. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
       {
@@ -378,7 +378,7 @@ export default component$(() => {
           });`,
 
         errors: [
-          'Identifier ("a") can not be captured inside the scope (useTask$) because it is Symbol, which is not serializable. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'Identifier ("a") can not be captured inside the scope (useTask$) because it is Symbol, which is not serializable. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
       {
@@ -400,7 +400,7 @@ export default component$(() => {
           });`,
 
         errors: [
-          'Identifier ("a") can not be captured inside the scope (useTask$) because it is a function, which is not serializable. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'Identifier ("a") can not be captured inside the scope (useTask$) because it is a function, which is not serializable. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
       {
@@ -417,7 +417,7 @@ export default component$(() => {
           return <div></div>
         });`,
         errors: [
-          'Identifier ("state") can not be captured inside the scope (useTask$) because "state.value" is a function, which is not serializable. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'Identifier ("state") can not be captured inside the scope (useTask$) because "state.value" is a function, which is not serializable. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
       {
@@ -448,7 +448,7 @@ export default component$(() => {
           );
         });`,
         errors: [
-          'The value of the identifier ("click") can not be changed once it is captured the scope (onClick$). Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'The value of the identifier ("click") can not be changed once it is captured the scope (onClick$). Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
       {
@@ -465,7 +465,7 @@ export default component$(() => {
           );
         });`,
         errors: [
-          'Identifier ("props") can not be captured inside the scope (onClick$) because "props.nonserializableTuple" is an instance of the "Function" class, which is not serializable. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+          'Identifier ("props") can not be captured inside the scope (onClick$) because "props.nonserializableTuple" is an instance of the "Function" class, which is not serializable. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
         ],
       },
     ],

packages/eslint-plugin-qwik/src/validLexicalScope.ts

@@ -40,11 +40,11 @@ export const validLexicalScope = createRule({
 
     messages: {
       referencesOutside:
-        'Identifier ("{{varName}}") can not be captured inside the scope ({{dollarName}}) because {{reason}}. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+        'Identifier ("{{varName}}") can not be captured inside the scope ({{dollarName}}) because {{reason}}. Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
       unvalidJsxDollar:
         'JSX attributes that end with $ can only take an inlined arrow function of a QRL identifier. Make sure the value is created using $()',
       mutableIdentifier:
-        'The value of the identifier ("{{varName}}") can not be changed once it is captured the scope ({{dollarName}}). Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+        'The value of the identifier ("{{varName}}") can not be changed once it is captured the scope ({{dollarName}}). Check out https://qwik.builder.io/docs/advanced/dollar/ for more details.',
     },
   },
   create(context) {

packages/qwik-city/package.json

@@ -82,13 +82,13 @@
     "@netlify/edge-functions": "^2.0.0",
     "@types/marked": "4.0.8",
     "@types/mdast": "^3.0.10",
-    "@types/node": "^18.11.16",
+    "@types/node": "^18.11.18",
     "@types/refractor": "3.0.2",
     "estree-util-value-to-estree": "2.1.0",
     "github-slugger": "2.0.0",
     "hast-util-heading-rank": "2.1.0",
     "hast-util-to-string": "2.0.0",
-    "marked": "4.2.4",
+    "marked": "4.2.5",
     "mdast-util-mdx": "^2.0.0",
     "refractor": "4.8.0",
     "rehype-autolink-headings": "6.1.1",
@@ -99,8 +99,8 @@
     "unified": "10.1.2",
     "unist-util-visit": "4.1.1",
     "uvu": "0.5.6",
-    "vite": "4.0.1",
-    "yaml": "2.1.3"
+    "vite": "4.0.3",
+    "yaml": "2.2.1"
   },
   "peerDependencies": {
     "@builder.io/qwik": ">=0.16.0"

packages/qwik-react/package.json

@@ -20,11 +20,11 @@
   "devDependencies": {
     "@builder.io/qwik": "workspace:*",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
+    "@types/react-dom": "18.0.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.4",
-    "vite": "4.0.1"
+    "vite": "4.0.3"
   },
   "peerDependencies": {
     "@builder.io/qwik": ">=0.1.11",

packages/qwik/src/core/api.md

@@ -740,6 +740,9 @@ export interface ResourceResolved<T> {
 // @public (undocumented)
 export type ResourceReturn<T> = ResourcePending<T> | ResourceResolved<T> | ResourceRejected<T>;
 
+// @internal (undocumented)
+export const _restProps: (props: Record<string, any>, omit: string[]) => Record<string, any>;
+
 // @alpha
 export const setPlatform: (plt: CorePlatform) => CorePlatform;
 

packages/qwik/src/core/index.ts

@@ -116,6 +116,7 @@ export type { ValueOrPromise } from './util/types';
 export type { Signal } from './state/signal';
 export type { NoSerialize } from './state/common';
 export { _wrapSignal } from './state/signal';
+export { _restProps } from './state/store';
 export { noSerialize, mutable } from './state/common';
 export { _IMMUTABLE } from './state/constants';
 

packages/qwik/src/core/state/store.ts

@@ -78,6 +78,19 @@ export const setObjectFlags = (obj: object, flags: number) => {
 
 export type TargetType = Record<string | symbol, any>;
 
+/**
+ * @internal
+ */
+export const _restProps = (props: Record<string, any>, omit: string[]) => {
+  const rest: Record<string, any> = {};
+  for (const key in props) {
+    if (!omit.includes(key)) {
+      rest[key] = props[key];
+    }
+  }
+  return rest;
+};
+
 class ReadWriteProxyHandler implements ProxyHandler<TargetType> {
   constructor(
     private $containerState$: ContainerState,
@@ -174,14 +187,6 @@ class ReadWriteProxyHandler implements ProxyHandler<TargetType> {
   }
 
   ownKeys(target: TargetType): ArrayLike<string | symbol> {
-    let subscriber: SubscriberHost | SubscriberEffect | null | undefined = null;
-    const invokeCtx = tryGetInvokeContext();
-    if (invokeCtx) {
-      subscriber = invokeCtx.$subscriber$;
-    }
-    if (subscriber) {
-      this.$manager$.$addSub$([0, subscriber, undefined]);
-    }
     if (isArray(target)) {
       return Reflect.ownKeys(target);
     }

packages/qwik/src/optimizer/core/src/code_move.rs

@@ -384,7 +384,7 @@ fn transform_fn(node: ast::FnExpr, use_lexical_scope: &Id, scoped_idents: &[Id])
     }
 }
 
-const fn create_return_stmt(expr: Box<ast::Expr>) -> ast::Stmt {
+pub const fn create_return_stmt(expr: Box<ast::Expr>) -> ast::Stmt {
     ast::Stmt::Return(ast::ReturnStmt {
         arg: Some(expr),
         span: DUMMY_SP,

packages/qwik/src/optimizer/core/src/collector.rs

@@ -42,6 +42,7 @@ pub struct Import {
 }
 
 pub struct GlobalCollect {
+    pub synthetic: Vec<(Id, Import)>,
     pub imports: HashMap<Id, Import>,
     pub exports: HashMap<Id, Option<JsWord>>,
     pub root: HashMap<Id, Span>,
@@ -52,6 +53,7 @@ pub struct GlobalCollect {
 
 pub fn global_collect(module: &ast::Module) -> GlobalCollect {
     let mut collect = GlobalCollect {
+        synthetic: vec![],
         imports: HashMap::with_capacity(16),
         exports: HashMap::with_capacity(16),
 
@@ -96,6 +98,9 @@ impl GlobalCollect {
     }
 
     pub fn add_import(&mut self, local: Id, import: Import) {
+        if import.synthetic {
+            self.synthetic.push((local.clone(), import.clone()));
+        }
         self.rev_imports.insert(
             (import.specifier.clone(), import.source.clone()),
             local.clone(),
@@ -370,25 +375,29 @@ impl Visit for IdentCollector {
     }
 }
 
-pub fn collect_from_pat(pat: &ast::Pat, identifiers: &mut Vec<(Id, Span)>) {
+pub fn collect_from_pat(pat: &ast::Pat, identifiers: &mut Vec<(Id, Span)>) -> bool {
     match pat {
         ast::Pat::Ident(ident) => {
             identifiers.push((id!(ident.id), ident.id.span));
+            true
         }
         ast::Pat::Array(array) => {
             for el in array.elems.iter().flatten() {
                 collect_from_pat(el, identifiers);
             }
+            false
         }
         ast::Pat::Rest(rest) => {
             if let ast::Pat::Ident(ident) = rest.arg.as_ref() {
                 identifiers.push((id!(ident.id), ident.id.span));
             }
+            false
         }
         ast::Pat::Assign(expr) => {
             if let ast::Pat::Ident(ident) = expr.left.as_ref() {
                 identifiers.push((id!(ident.id), ident.id.span));
             }
+            false
         }
         ast::Pat::Object(obj) => {
             for prop in &obj.props {
@@ -406,7 +415,8 @@ pub fn collect_from_pat(pat: &ast::Pat, identifiers: &mut Vec<(Id, Span)>) {
                     }
                 }
             }
+            false
         }
-        _ => {}
-    };
+        _ => false,
+    }
 }

packages/qwik/src/optimizer/core/src/lib.rs

@@ -17,6 +17,7 @@ mod filter_exports;
 mod is_immutable;
 mod package_json;
 mod parse;
+mod props_destructuring;
 mod transform;
 mod utils;
 mod words;

packages/qwik/src/optimizer/core/src/parse.rs

@@ -10,6 +10,7 @@ use crate::collector::global_collect;
 use crate::const_replace::ConstReplacerVisitor;
 use crate::entry_strategy::EntryPolicy;
 use crate::filter_exports::StripExportsVisitor;
+use crate::props_destructuring::transform_props_destructuring;
 use crate::transform::{HookKind, QwikTransform, QwikTransformOptions};
 use crate::utils::{Diagnostic, DiagnosticCategory, DiagnosticScope, SourceLocation};
 use path_slash::PathExt;
@@ -283,8 +284,11 @@ pub fn transform_code(config: TransformCodeOptions) -> Result<TransformOutput, a
                     ));
 
                     // Collect import/export metadata
-                    let collect = global_collect(&main_module);
+                    let mut collect = global_collect(&main_module);
 
+                    transform_props_destructuring(&mut main_module, &mut collect);
+
+                    // Replace const values
                     if let Some(is_server) = config.is_server {
                         let mut const_replacer = ConstReplacerVisitor::new(is_server, &collect);
                         main_module.visit_mut_with(&mut const_replacer);