v0.5.0

[brainkim]

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 now restart and re-run 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.

  New Features

• The automatic JSX runtime transform is now supported.
• 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.

• 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.

[darrylcousins]

Hi Brian,

Good for you, sincerely; good for you. I've been coding javascript off and on since 1999 and the early days of DHTML. As far as I know this is the by far the easiest package to use for rendering and refreshing the DOM (React is a chore). Congratulations.

I've been using @bikeshaving/crank for a live site for 2 years, and at moment further extending the application.

I'm fear I'm still at npm @bikeshaving/crank --version 8.5.5 - I really should update.

You got this.

Ngā mihi nui, Darryl Cousins

[brainkim]

@darrylcousins Thank you so much for these kinds words, Darryl! I’m going through a difficult time and this is just the motivation I need to believe in myself. If we should ever meet in person, perhaps if in my journeys I end up in Aotearoa somehow, please let me buy you a drink or whatever.

[brainkim]

TODOS:

Library work

• [x] New module with working title template which parses template tags.
• [x] Cache template tag calls by spans.
• [x] Dollar sign shortcuts for special props and tags
• [x] Rewrite tests to use uvu/playwright
• [ ] Consider publishing to DENO

  Documentation work

• [ ] Make getting started a little more useful
• [ ] Split out JSX from stuff on elements and renderers
• [ ] Document the template tag
• [ ] Document the static prop. Regroup special props and tags by use-case.
• [ ] Avoid referencing React in guides
• [ ] Move API reference to its own page/pages
• [ ] Rewrite examples to use templates
• [ ] Rework the async docs to make more sense

  Website work

• [x] Add a playground/REPL page
• [x] Better hero interactive for homepage
• [ ] Add examples directly to the homepage
• [ ] Work on the logo
• [ ] Bylines
• [ ] Social stuff
• [ ] Style the contents of the iframe playground
• [ ] Routing/404 page
• [ ] Ship a prebuilt copy of Crank from the website itself rather than relying on unpkg
• [ ] Metaframework???

  Marketing work

• [ ] Messaging shift to “Just JavaScript”
• [ ] Blog post with working title: “Web frameworks don’t have to be reactive”
• [ ] Blog post with working title: ”Introducing Revise.js”
• [ ] Blog post with working title: “Moving past JSX”
• [ ] Blog post with working title: “X quality of life improvements over React”
• [ ] Update Crank.js from scratch blog post with the new architecture
• [ ] Tongue in cheek FAQ on the homepage maybe