wip trying to get qwik processed by the optimizer so bind:value is do…

…ne via a qrl

perhaps instead use a well-known name for it and export it from qwik? This will load the framework, which is ok since it needs to write to a signal

packages/docs/src/repl/worker/repl-plugins.ts

@@ -24,7 +24,7 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
  id === '@builder.io/qwik/jsx-runtime' ||
  id === '@builder.io/qwik/jsx-dev-runtime'
  ) {
- return '\0qwikCore';
+ return '/core.qwik.mjs';
  }
  if (id === '@builder.io/qwik/server') {
  return '\0qwikServer';
@@ -48,14 +48,14 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
  return input.code;
  }
  if (buildMode === 'ssr') {
- if (id === '\0qwikCore') {
+ if (id === '/core.qwik.mjs') {
  return getRuntimeBundle('qwikCore');
  }
  if (id === '\0qwikServer') {
  return getRuntimeBundle('qwikServer');
  }
  }
- if (id === '\0qwikCore') {
+ if (id === '/core.qwik.mjs') {
  if (options.buildMode === 'production') {
  const rsp = await depResponse('@builder.io/qwik', '/core.min.mjs');
  if (rsp) {

packages/qwik/src/core/ssr/ssr-render-jsx.ts

@@ -7,8 +7,17 @@ import { Slot } from '../shared/jsx/slot.public';
 import type { JSXNode, JSXOutput } from '../shared/jsx/types/jsx-node';
 import type { JSXChildren } from '../shared/jsx/types/jsx-qwik-attributes';
 import { SSRComment, SSRRaw, SSRStream, type SSRStreamChildren } from '../shared/jsx/utils.public';
-import { trackSignal } from '../use/use-core';
+import { isQrl } from '../shared/qrl/qrl-class';
+import type { QRL } from '../shared/qrl/qrl.public';
+import { qrlToString, type SerializationContext } from '../shared/shared-serialization';
+import { DEBUG_TYPE, VirtualType } from '../shared/types';
 import { isAsyncGenerator } from '../shared/utils/async-generator';
+import {
+ convertEventNameFromJsxPropToHtmlAttr,
+ getEventNameFromJsxProp,
+ isJsxPropertyAnEventName,
+ isPreventDefault,
+} from '../shared/utils/event-names';
 import { EMPTY_ARRAY } from '../shared/utils/flyweight';
 import { throwErrorAndStop } from '../shared/utils/log';
 import {
@@ -32,8 +41,9 @@ import { DEBUG_TYPE, VirtualType } from '../shared/types';
 import { WrappedSignal, EffectProperty, isSignal } from '../signal/signal';
 import { applyInlineComponent, applyQwikComponentBody } from './ssr-render-component';
 import type { ISsrComponentFrame, ISsrNode, SSRContainer, SsrAttrs } from './ssr-types';
-import { qInspector } from '../shared/utils/qdev';
-import { serializeAttribute } from '../shared/utils/styles';
+// Allow the optimizer to process this $
+// @ts-ignore -- this gets renamed to qwik during build
+import { $ } from '@builder.io/qwik-external';
 
 class ParentComponentData {
  constructor(
@@ -367,8 +377,7 @@ export function toSsrAttrs(
  return null;
  }
  const ssrAttrs: SsrAttrs = [];
- for (const key in record) {
- let value = record[key];
+ const handleProp = (key: string, value: unknown) => {
  if (isJsxPropertyAnEventName(key)) {
  if (anotherRecord) {
  /**
@@ -397,15 +406,15 @@ export function toSsrAttrs(
  // merge values from the const props with the var props
  value = getMergedEventPropValues(value, anotherValue);
  } else {
- continue;
+ return;
  }
  }
  }
  const eventValue = setEvent(serializationCtx, key, value);
  if (eventValue) {
  ssrAttrs.push(convertEventNameFromJsxPropToHtmlAttr(key), eventValue);
  }
- continue;
+ return;
  }
 
  if (isSignal(value)) {
@@ -416,7 +425,7 @@ export function toSsrAttrs(
  } else {
  ssrAttrs.push(key, value);
  }
- continue;
+ return;
  }
 
  if (isPreventDefault(key)) {
@@ -426,6 +435,25 @@ export function toSsrAttrs(
  value = serializeAttribute(key, value, styleScopedId);
 
  ssrAttrs.push(key, value as string);
+ };
+ for (const key in record) {
+ const value = record[key];
+ if (key.startsWith('bind:')) {
+ const propName = key.slice(5);
+ // emit signal value as the value of the input
+ handleProp(propName, value);
+ // emit handler to update the signal value
+ const handler = propName === 'value' || propName === 'checked' ? 'onInput$' : 'onChange$';
+ // todo verify if static listeners flag needs to be set
+ handleProp(
+ handler,
+ $((_: any, element: any) => {
+ (value as Signal).value = element[propName];
+ })
+ );
+ } else {
+ handleProp(key, value);
+ }
  }
  if (key != null) {
  ssrAttrs.push(ELEMENT_KEY, key);

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_input_bind.snap

@@ -27,50 +27,31 @@ export const Greeter = component$(() => {
 ============================= test.js ==
 
 import { componentQrl } from "@builder.io/qwik";
-import { useLexicalScope } from "@builder.io/qwik";
-import { inlinedQrl } from "@builder.io/qwik";
 import { _jsxSorted } from "@builder.io/qwik";
 import { _wrapProp } from "@builder.io/qwik";
+import { inlinedQrl } from "@builder.io/qwik";
 import { Fragment as _Fragment } from "@builder.io/qwik/jsx-runtime";
 export const Greeter = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(()=>{
  const value = useSignal(0);
  const checked = useSignal(false);
  const stuff = useSignal();
  return /*#__PURE__*/ _jsxSorted(_Fragment, null, null, [
  /*#__PURE__*/ _jsxSorted("input", null, {
- "value": value,
- "onInput$": /*#__PURE__*/ inlinedQrl((_, elm)=>{
- const [value] = useLexicalScope();
- return value.value = elm.value;
- }, "s_6IZeYpXCNXA", [
- value
- ])
+ "bind:value": value
  }, null, 3, null),
  /*#__PURE__*/ _jsxSorted("input", null, {
- "checked": checked,
- "onInput$": /*#__PURE__*/ inlinedQrl((_, elm)=>{
- const [checked] = useLexicalScope();
- return checked.value = elm.checked;
- }, "s_JPI3bLCVnso", [
- checked
- ])
+ "bind:checked": checked
  }, null, 3, null),
  /*#__PURE__*/ _jsxSorted("input", null, {
- "stuff": stuff,
- "onChange$": /*#__PURE__*/ inlinedQrl((_, elm)=>{
- const [stuff] = useLexicalScope();
- return stuff.value = elm.stuff;
- }, "s_eyREJ0lZTFw", [
- stuff
- ])
+ "bind:stuff": stuff
  }, null, 3, null),
  /*#__PURE__*/ _jsxSorted("div", null, null, value, 3, null),
  /*#__PURE__*/ _jsxSorted("div", null, null, _wrapProp(value), 3, null)
  ], 3, "u6_0");
 }, "s_n7HuG2hhU0Q"));
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;;AAGA,OAAO,MAAM,wBAAU,sCAAW;IACjC,MAAM,QAAQ,UAAU;IACxB,MAAM,UAAU,UAAU;IAC1B,MAAM,QAAQ;IACd,qBACC;sBACC,WAAC;qBAAkB;;;uBAAA;;;;;sBACnB,WAAC;uBAAoB;;;uBAAA;;;;;sBACrB,WAAC;qBAAkB;;;uBAAA;;;;;sBACnB,WAAC,mBAAK;sBACN,WAAC,6BAAK;;AAIT,qBAAG\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAGA,OAAO,MAAM,wBAAU,sCAAW;IACjC,MAAM,QAAQ,UAAU;IACxB,MAAM,UAAU,UAAU;IAC1B,MAAM,QAAQ;IACd,qBACC;sBACC,WAAC;YAAD,cAAmB;;sBACnB,WAAC;YAAD,gBAAqB;;sBACrB,WAAC;YAAD,cAAmB;;sBACnB,WAAC,mBAAK;sBACN,WAAC,6BAAK;;AAIT,qBAAG\"}")
 == DIAGNOSTICS ==
 
 []

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

@@ -1253,92 +1253,6 @@ impl<'a> QwikTransform<'a> {
  } else {
  children = Some(transformed_children);
  }
- } else if !is_fn && key_word.starts_with("bind:") {
- // TODO: move this into jsx runtime with an inline QRL
- // right now we can't do it because qwik doesn't get checked for QRLs
- let folded = node.value.clone().fold_with(self);
- let prop_name: JsWord = key_word[5..].into();
- maybe_const_props.push(ast::PropOrSpread::Prop(Box::new(
- ast::Prop::KeyValue(ast::KeyValueProp {
- key: ast::PropName::Str(ast::Str {
- span: DUMMY_SP,
- value: prop_name.clone(),
- raw: None,
- }),
- value: folded.clone(),
- }),
- )));
- let elm = private_ident!("elm");
- let arrow_fn = ast::Expr::Arrow(ast::ArrowExpr {
- params: vec![
- ast::Pat::Ident(ast::BindingIdent::from(
- ast::Ident::new(
- "_".into(),
- DUMMY_SP,
- SyntaxContext::empty(),
- ),
- )),
- ast::Pat::Ident(ast::BindingIdent::from(elm.clone())),
- ],
- body: Box::new(ast::BlockStmtOrExpr::Expr(Box::new(
- ast::Expr::Assign(ast::AssignExpr {
- left: ast::AssignTarget::Simple(
- ast::SimpleAssignTarget::Member(
- ast::MemberExpr {
- obj: folded.clone(),
- prop: ast::MemberProp::Ident(
- ast::IdentName::new(
- "value".into(),
- DUMMY_SP,
- ),
- ),
- span: DUMMY_SP,
- },
- ),
- ),
- op: ast::AssignOp::Assign,
- right: Box::new(ast::Expr::Member(
- ast::MemberExpr {
- obj: Box::new(ast::Expr::Ident(elm)),
- prop: ast::MemberProp::Ident(
- ast::IdentName::new(
- prop_name, DUMMY_SP,
- ),
- ),
- span: DUMMY_SP,
- },
- )),
- span: DUMMY_SP,
- }),
- ))),
- ..Default::default()
- });
- let event_handler = JsWord::from(match key_word.as_ref() {
- "bind:value" => "onInput$",
- "bind:checked" => "onInput$",
- _ => "onChange$",
- });
- let (converted_expr, is_const) = self
- ._create_synthetic_qsegment(
- arrow_fn,
- SegmentKind::EventHandler,
- event_handler.clone(),
- None,
- );
- if !is_const {
- static_listeners = false;
- }
- let converted_prop = ast::PropOrSpread::Prop(Box::new(
- ast::Prop::KeyValue(ast::KeyValueProp {
- value: Box::new(ast::Expr::Call(converted_expr)),
- key: ast::PropName::Str(ast::Str {
- span: DUMMY_SP,
- value: event_handler,
- raw: None,
- }),
- }),
- ));
- event_handlers.push(converted_prop);
  } else if !is_fn && (key_word == *REF || key_word == *QSLOT) {
  // skip
  var_props.push(prop.fold_with(self));

packages/qwik/tsconfig.json

@@ -3,6 +3,7 @@
  "compilerOptions": {
  "paths": {
  "@builder.io/qwik": ["packages/qwik/src/core"],
+ "@builder.io/qwik-external": ["@builder.io/qwik"],
  "@builder.io/qwik/jsx-runtime": ["packages/qwik/src/jsx-runtime"],
  "@builder.io/qwik/jsx-dev-runtime": ["packages/qwik/src/jsx-runtime"],
  "@builder.io/qwik/build": ["packages/qwik/src/build"],

scripts/submodule-build.ts

@@ -42,6 +42,7 @@ export async function bundleIndex(config: BuildConfig, entryName: string) {
  bundle: true,
  sourcemap: true,
  target,
+ external: ['@builder.io/qwik-external'],
  };
 
  const esm = build({

scripts/submodule-core.ts

@@ -22,7 +22,7 @@ async function submoduleCoreProd(config: BuildConfig) {
  const input: InputOptions = {
  input: join(config.tscDir, 'packages', 'qwik', 'src', 'core', 'index.js'),
  onwarn: rollupOnWarn,
- external: ['@builder.io/qwik/build'],
+ external: ['@builder.io/qwik-external', '@builder.io/qwik/build'],
  plugins: [
  {
  name: 'setVersion',
@@ -34,6 +34,7 @@ async function submoduleCoreProd(config: BuildConfig) {
  'globalThis.QWIK_VERSION',
  JSON.stringify(config.distVersion)
  );
+ b.code = b.code.replaceAll('@builder.io/qwik-external', '@builder.io/qwik');
  }
  }
  },
@@ -71,6 +72,7 @@ async function submoduleCoreProd(config: BuildConfig) {
  const inputMin: InputOptions = {
  input: inputCore,
  onwarn: rollupOnWarn,
+ external: ['@builder.io/qwik-external'],
  plugins: [
  {
  name: 'build',
@@ -226,14 +228,15 @@ async function submoduleCoreDev(config: BuildConfig) {
 
  const esm = build({
  ...opts,
- external: ['@builder.io/qwik/build'],
+ external: ['@builder.io/qwik/build', '@builder.io/qwik-external'],
  format: 'esm',
  outExtension: { '.js': '.qwik.mjs' },
  });
 
  const cjs = build({
  ...opts,
  // we don't externalize qwik build because then the repl service worker sees require()
+ external: ['@builder.io/qwik-external'],
  define: {
  ...opts.define,
  // Vite's base url

scripts/submodule-optimizer.ts

@@ -33,6 +33,7 @@ export async function submoduleOptimizer(config: BuildConfig) {
  external: [
  /* no Node.js built-in externals allowed! */
  'espree',
+ '@builder.io/qwik-external',
  ],
  };
 

scripts/submodule-server.ts

@@ -27,6 +27,7 @@ export async function submoduleServer(config: BuildConfig) {
  external: [
  /* no Node.js built-in externals allowed! */ '@builder.io/qwik-dom',
  '@builder.io/qwik/build',
+ '@builder.io/qwik-external',
  ],
  };
 

scripts/submodule-testing.ts

@@ -14,7 +14,7 @@ export async function submoduleTesting(config: BuildConfig) {
  sourcemap: config.dev,
  bundle: true,
  target,
- external: ['@builder.io/qwik/build', 'prettier', 'vitest'],
+ external: ['@builder.io/qwik/build', 'prettier', 'vitest', '@builder.io/qwik-external'],
  platform: 'node',
  // external: [...nodeBuiltIns],
  };