diff --git a/packages/compiler/react/transform.ts b/packages/compiler/react/transform.ts index eaa570bf57..c8085c64ce 100644 --- a/packages/compiler/react/transform.ts +++ b/packages/compiler/react/transform.ts @@ -904,7 +904,7 @@ export const transformJSX = ( jsxPath.replaceWith(t.jsxExpressionContainer(id!)); }, [jsx, t.booleanLiteral(unstable)]); - return dynamics; + continue; } if (isJSXFragment(child)) { @@ -1069,7 +1069,7 @@ export const transformJSX = ( jsx.children[i] = t.jsxExpressionContainer(id!); }, [expression, t.booleanLiteral(unstable)]); - return dynamics; + continue; } const id = createDynamic( diff --git a/packages/kitchen-sink/src/examples/form.tsx b/packages/kitchen-sink/src/examples/form.tsx new file mode 100644 index 0000000000..bcd48e3434 --- /dev/null +++ b/packages/kitchen-sink/src/examples/form.tsx @@ -0,0 +1,18 @@ +import { block } from 'million/react'; + +const Form = block(() => { + const onSubmit = (event: any) => { + event.preventDefault(); + alert('submitted'); + }; + + return ( +
+
+ +
+
+ ); +}); + +export default Form; diff --git a/packages/million/dom.ts b/packages/million/dom.ts index 1cbdcc2edf..089da254c9 100644 --- a/packages/million/dom.ts +++ b/packages/million/dom.ts @@ -94,24 +94,27 @@ export const createEventListener = ( name: string, value?: EventListener, ) => { - const event = name.toLowerCase(); + let event = name.toLowerCase(); + let capture = false; + if (event.endsWith('capture')) { + event = event.slice(0, -7); + capture = true; + } + const key = `$$${event}`; if (!SetHas$.call(document$[EVENTS_REGISTRY], event)) { // createEventListener uses a synthetic event handler to capture events // https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294 - addEventListener$.call(document$, event, (nativeEvent: Event) => { - nativeEvent.stopPropagation = () => { - nativeEvent.cancelBubble = true; - nativeEvent.stopImmediatePropagation(); - }; - - requestAnimationFrame(() => { + addEventListener$.call( + document$, + event, + (nativeEvent: Event) => { let el = nativeEvent.target as Node | null; // Bubble up the DOM tree to find all event listeners while (el) { const handler = el[key]; if (handler) { - Object.defineProperty(nativeEvent, 'currentTarget', { + Object$.defineProperty(nativeEvent, 'currentTarget', { configurable: true, get() { return el; @@ -121,8 +124,9 @@ export const createEventListener = ( } el = el.parentNode; } - }); - }); + }, + { capture }, + ); SetAdd$.call(document$[EVENTS_REGISTRY], event); } const patch = (newValue?: EventListener | null) => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e52a459311..8410be045c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -189,10 +189,10 @@ importers: version: 4.0.0(vite@4.4.9) vite: specifier: 4.4.9 - version: 4.4.9(@types/node@18.14.1) + version: 4.4.9 vite-plugin-inspect: specifier: ^0.7.37 - version: 0.7.37(rollup@3.28.0)(vite@4.4.9) + version: 0.7.37(vite@4.4.9) packages/million: {} @@ -295,7 +295,7 @@ importers: specifier: ^10.12.4 version: 10.12.4(react-dom@18.2.0)(react@18.2.0) million: - specifier: workspace:2.6.0-beta.8 + specifier: workspace:* version: link:.. next: specifier: ^13.4.10 @@ -2790,6 +2790,20 @@ packages: rollup: 3.28.0 dev: true + /@rollup/pluginutils@5.0.3: + resolution: {integrity: sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.1 + estree-walker: 2.0.2 + picomatch: 2.3.1 + dev: true + /@rollup/pluginutils@5.0.3(rollup@3.28.0): resolution: {integrity: sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==} engines: {node: '>=14.0.0'} @@ -3480,7 +3494,7 @@ packages: '@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.22.10) '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.10) react-refresh: 0.14.0 - vite: 4.4.9(@types/node@18.14.1) + vite: 4.4.9 transitivePeerDependencies: - supports-color dev: true @@ -10095,7 +10109,7 @@ packages: - terser dev: true - /vite-plugin-inspect@0.7.37(rollup@3.28.0)(vite@4.4.9): + /vite-plugin-inspect@0.7.37(vite@4.4.9): resolution: {integrity: sha512-cRHzaE8g8/UUK0hA5DunAXiN3eJnq7Dpcu2bVf5dCRj/MYBKGeAv0Z27vYMhm2F/oeE5aG3+oYF4tkdhOlpXxg==} engines: {node: '>=14'} peerDependencies: @@ -10106,13 +10120,13 @@ packages: optional: true dependencies: '@antfu/utils': 0.7.6 - '@rollup/pluginutils': 5.0.3(rollup@3.28.0) + '@rollup/pluginutils': 5.0.3 debug: 4.3.4 fs-extra: 11.1.1 open: 9.1.0 picocolors: 1.0.0 sirv: 2.0.3 - vite: 4.4.9(@types/node@18.14.1) + vite: 4.4.9 transitivePeerDependencies: - rollup - supports-color @@ -10135,6 +10149,41 @@ packages: - typescript dev: true + /vite@4.4.9: + resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.18.20 + postcss: 8.4.28 + rollup: 3.28.0 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vite@4.4.9(@types/node@18.14.1): resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/website/package.json b/website/package.json index 8a479626c5..6e4f422a4d 100644 --- a/website/package.json +++ b/website/package.json @@ -22,7 +22,7 @@ "classnames": "^2.3.2", "dedent": "^0.7.0", "framer-motion": "^10.12.4", - "million": "workspace:2.6.0-beta.8", + "million": "workspace:*", "next": "^13.4.10", "nextra": "^2.10.0", "nextra-theme-docs": "^2.10.0",