@b9g/crank - npm Package Versions

[0.6.0] - 2024-04-26

Breaking Changes

• Special props are now unprefixed. All special prefixed props are deprecated.
• Special props are now passed into components via props.
• The ref prop behavior has been changed. For host elements, the callback is fired once when the element is created. For component elements, the callback must be manually passed to one of the component’s children to fire. The ref callback will have no effect for other elements like <Fragment>.
• The special static prop has been renamed to copy to avoid collisions with the static keyword.
• The context.value property, which allows you to access the current rendered value of a component from the context, has been deprecated.
• Elements which are reused between renders will skip rendering. This means you have to clone elements between renders if you want them to rerender.

Features

• Component contexts are now passed to components as the second parameter.
• React style camelCased event names (onChange, onInput) are now supported.
• Stale renders are skipped with using for await...of in async generator components.
• Components will now warn when yielding multiple times per props iteration.

[0.5.7] - 2023-12-05

• Fix keyed elements disappearing incorrectly, a bug introduced in 0.5.5

[0.5.6] - 2023-11-07

• Fix foreignObject children having the wrong xmlns (https://github.com/bikeshaving/crank/pull/268 by (@canadaduane)

[0.5.5] - 2023-11-06

• Fix keyed component elements not cleaning up properly https://github.com/bikeshaving/crank/issues/267

[0.5.4] - 2023-05-22

Bug Fixes

• Fix DOM renderer bug where input of type="text" does not appear in the DOM, causing surprising CSS styling issues (https://github.com/bikeshaving/crank/pull/258 by @waynebaylor)

[0.5.3] - 2023-03-12

Bug Fixes

• The cleanup() functions will be called even if components are unmounted. https://github.com/bikeshaving/crank/issues/249
• Fixes a situation where component errors in async components were being ignored. https://github.com/bikeshaving/crank/issues/253

[0.5.2] - 2023-02-03

Bug Fixes

• Allow Context<typeof Component> context types to be passed components with 0 parameters.
• Alias jsx-dev-runtime to jsx-runtime for parcel/other bundlers
• Disable hydration mismatch warnings until we figure out the expected DX for warning suppression.

[0.5.1] - 2023-02-02

Bug Fixes

• Fixed a bug where refreshing hydrated components throws errors.

[0.5.0] - 2023-02-01

Breaking changes

• The internal RendererImpl method escape() has been renamed to text().
• The internal RendererImpl method parse() has been renamed to raw(), and the value prop is always passed into this method, regardless of whether the value is a string.
• Generator components which return will restart when re-rerendered, rather than staying stuck on the returned value. This should help debugging components which have accidentally returned.

Quality of life improvements

• Special props like crank-key, have an additional $-prefixed variant. Going forward, this will be the preferred syntax, but crank-key and c-key will continue to be supported as well.

  <div $key={key} $ref={ref} $static />
  

• Generator components which are in a for...of or for await...of loop will now attempt to exit normally, so that cleanup code can be placed after the loop.

  // before
  function Counter() {
  	let i = 0;
  	const interval = setInterval(() => {
  		i++;
  		this.refresh();
  	}, 1000);
  	try {
  		for ({} of this) {
  			yield <div>{i}</div>;
  		}
  	} finally {
  		clearInterval(interval);
  	}
  }
  
  // after
  function Counter() {
  	let i = 0;
  	const interval = setInterval(() => {
  		i++;
  		this.refresh();
  	}, 1000);
  	for ({} of this) {
  		yield <div>{i}</div>;
  	}
  	clearInterval(interval);
  }
  

• Async generator components can now use for...of loops. Async generator components which yield from a for...of loop behave like sync generator components, pausing at each yield.

  async function Counter() {
  	let i = 0;
  	const interval = setInterval(() => {
  		i++;
  		this.refresh();
  	}, 1000);
  	for ({} of this) {
  		yield <div>{i}</div>;
  	}
  
  	clearInterval(interval);
  }
  

• The Context type can now be passed a function type as its first parameter to strongly type the this props iterators.

  function *MyComponent(
  	this: Context<typeof MyComponent>,
  	{name}: {name: string},
  ) {
  
  	// name will be correctly inferred
  	for ({name} of this) {
  		yield <div>Hello name</div>;
  	}
  }
  

New Features

• The automatic JSX runtime transform is now supported. Here is the babel configuration.

  plugins: [
  	babelPluginSyntaxJSX,
  	[
  		babelPluginTransformReactJSX,
  		{
  			runtime: "automatic",
  			importSource: "@b9g/crank",
  		},
  	],
  ],
  

• Hydration: The DOM Renderer now provides a hydrate() method which will attempt to re-use DOM nodes already found on the page. A corresponding hydrate() method has been defined for custom renderers.

• Crank now provides a tagged template function called jsx which replicates JSX syntax and allows templates to be written with vanilla JavaScript.

  import {jsx} from "@b9g/crank/standalone";
  import {renderer} from "@b9g/crank/standalone";
  function Greeting({
  	name
  }) {
  	return jsx`
  		<div>Hello ${name}</div>
  	`;
  }
  
  renderer.render(jsx`<${Greeting} name="world" />`, document.body);
  

• Calling dispatchEvent() on a component context will now trigger any onevent style props.

Bug Fixes

• Errors which are thrown in Context event listener functions will not prevent other listeners from being called.
• Async generator components should run more predictably.
• IFrame/IMG src and other props which are sensitive to being re-assigned will not be re-assigned.
• $static elements which are re-rendered with different tags will now correctly re-render.