@b9g/crank - npm Package Compare versions

Comparing version 0.4.4 to 0.5.0-beta.0

crank.d.ts

@@ -169,5 +169,5 @@ /**
 export declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
-/**
- * Clones a given element, shallowly copying the props object.
- */
+/** A single-letter alias for createElement */
+export declare const c: typeof createElement;
+/** Clones a given element, shallowly copying the props object. */
 export declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Element<TTag>;
@@ -174,0 +174,0 @@ /**

crank.js

@@ -108,2 +108,3 @@ /// <reference types="crank.d.ts" />
 }
+// See Element interface
 Element.prototype.$$typeof = ElementSymbol;
@@ -131,2 +132,3 @@ function isElement(value) {
                 case "c-key":
+                case "$key":
                     // We have to make sure we don’t assign null to the key because we
@@ -140,2 +142,3 @@ // don’t check for null keys in the diffing functions.
                 case "c-ref":
+                case "$ref":
                     if (typeof props[name] === "function") {
@@ -147,2 +150,3 @@ ref = props[name];
                 case "c-static":
+                case "$static":
                     static_ = !!props[name];
@@ -161,7 +165,23 @@ break;
     }
+    // string aliases for the special tags
+    // TODO: Does this logic belong here, or in the Element constructor
+    switch (tag) {
+        case "$FRAGMENT":
+            tag = Fragment;
+            break;
+        case "$PORTAL":
+            tag = Portal;
+            break;
+        case "$COPY":
+            tag = Copy;
+            break;
+        case "$RAW":
+            tag = Raw;
+            break;
+    }
     return new Element(tag, props1, key, ref, static_);
 }
-/**
- * Clones a given element, shallowly copying the props object.
- */
+/** A single-letter alias for createElement */
+const c = createElement;
+/** Clones a given element, shallowly copying the props object. */
 function cloneElement(el) {
@@ -740,5 +760,5 @@ if (!isElement(el)) {
  * yields or returns undefined warnings. The reason we’re using this versus
- * IsUnmounted is a very troubling jest test (cascades sync generator parent
- * and sync generator child) where synchronous code causes a stack overflow
- * error in a non-deterministic way. Deeply disturbing stuff.
+ * IsUnmounted is a very troubling test (cascades sync generator parent and
+ * sync generator child) where synchronous code causes a stack overflow error
+ * in a non-deterministic way. Deeply disturbing stuff.
  */
@@ -1644,3 +1664,3 @@ const IsErrored = 1 << 5;
 
-export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, cloneElement, createElement, crank as default, isElement };
+export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, c, cloneElement, createElement, crank as default, isElement };
 //# sourceMappingURL=crank.js.map

index.d.ts

 export * from "./crank.js";
-export { default } from "./crank.js";
+export { xm } from "./xm.js";

index.js

 /// <reference types="index.d.ts" />
-export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, cloneElement, createElement, default, isElement } from './crank.js';
+export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, c, cloneElement, createElement, isElement } from './crank.js';
+export { xm } from './xm.js';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@b9g/crank",
-  "version": "0.4.4",
+  "version": "0.5.0-beta.0",
   "description": "Write JSX-driven components with functions, promises and generators.",
@@ -17,4 +17,4 @@ "homepage": "https://crank.js.org",
     ".": {
-      "import": "./crank.js",
-      "require": "./crank.cjs"
+      "import": "./index.js",
+      "require": "./index.cjs"
     },
@@ -54,2 +54,10 @@ "./crank": {
     "./package.json": "./package.json",
+    "./xm": {
+      "import": "./xm.js",
+      "require": "./xm.cjs"
+    },
+    "./xm.js": {
+      "import": "./xm.js",
+      "require": "./xm.cjs"
+    },
     "./umd": {
@@ -62,24 +70,24 @@ "require": "./umd.js"
   },
-  "main": "crank.cjs",
-  "module": "crank.js",
-  "types": "crank.d.ts",
+  "main": "index.cjs",
+  "module": "index.js",
+  "types": "index.d.ts",
   "devDependencies": {
     "@arkweid/lefthook": "^0.7.7",
-    "@types/jest": "^26.0.23",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.21.0",
+    "@types/sinon": "^10.0.12",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
+    "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^24.4.2",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
-    "jest": "^26.6.3",
     "magic-string": "^0.26.2",
+    "playwright-test": "^8.1.1",
     "prettier": "^2.7.1",
-    "rollup": "^2.77.2",
+    "rollup": "^2.76.0",
     "rollup-plugin-typescript2": "^0.32.1",
     "shx": "^0.3.4",
-    "ts-jest": "^26.5.6",
-    "ts-jest-resolver": "^2.0.0",
-    "typescript": "^4.7.4"
+    "sinon": "^14.0.0",
+    "ts-node": "^10.9.0",
+    "typescript": "^4.7.4",
+    "uvu": "^0.5.6"
   },
@@ -89,2 +97,2 @@ "publishConfig": {
   }
-}
+}

README.md

 # Crank.js
-Write JSX-driven components with functions, promises and generators.
+### The most “Just JavaScript” web framework.
 
-Documentation is available at [crank.js.org](https://crank.js.org). Crank.js is in a beta phase, and some APIs may change. To read more about the motivations for this library, you can read the [introductory blog post](https://crank.js.org/blog/introducing-crank).
+Crank.js is a framework where components are defined with *Plain Old JavaScript Functions*. But not just regular functions! Components can also be defined with async functions for working with promises, and generator functions for working with local state.
 
-## Features
-### Declarative
-Crank uses the same JSX syntax and diffing algorithm popularized by React, allowing you to write HTML-like code directly in JavaScript.
+Its API aims to be minimal and transparent. By relying on standard JavaScript control flow operators and data structures, and by making the process of rendering explicit, Crank.js helps developers write durable, bug-free applications with the latest and greatest libraries and APIs.
 
-### Just Functions
-All components in Crank are just functions or generator functions. No classes, hooks, proxies or template languages are needed.
+Rather than forcing developers to work with increasingly convoluted reactive solutions and bespoke templating languages, Crank.js uses the platform. It is a dedication to the web, to the promise of an accessible and inclusive medium for self-expression and commerce, built on the thesis that simpler code is how we’ll push the frontier.
 
-### Promise-friendly
-Crank provides first-class support for promises. You can define components as async functions and race renderings to display fallback UIs.
+## Get Started
 
-### Lightweight
-Crank has no dependencies, and its core is a single file. It currently measures at [5KB minified and gzipped](https://bundlephobia.com/result?p=@b9g/crank).
+The documentation for Crank.js is available at [crank.js.org](https://crank.js.org). Crank.js is published on NPM under the `@b9g` organization (short for “b*ikeshavin*g”).
 
-### Performant
-[According to benchmarks](https://github.com/krausest/js-framework-benchmark), Crank beats React in terms of speed and memory usage, and is currently comparable to Preact or Vue.
-
-### Extensible
-The core renderer can be extended to target alternative environments such as WebGL libraries, terminals, smartphones or smart TVs.
-
-## Installation
-Crank is available on [NPM](https://npmjs.org/@b9g/crank) in the ESModule and CommonJS formats.
-
 ```shell
@@ -32,24 +18,8 @@ $ npm install @b9g/crank
 
-```jsx
-/** @jsx createElement */
-import {createElement} from "@b9g/crank";
-import {renderer} from "@b9g/crank/dom";
+### Key Examples
 
-renderer.render(<div id="hello">Hello world</div>, document.body);
-```
+#### A Simple Component
 
-If your environment does not support ESModules (you may see a message like `SyntaxError: Unexpected token export`), you can import the CommonJS versions of the library under the `cjs` directory.
-
-```jsx
+```jsx live
 /** @jsx createElement */
-import {createElement} from "@b9g/crank/cjs";
-import {renderer} from "@b9g/crank/cjs/dom";
-
-renderer.render(<div id="hello">Hello world</div>, document.body);
-```
-
-## Key Examples
-### A Simple Component
-```jsx
-/** @jsx createElement */
 import {createElement} from "@b9g/crank";
@@ -67,6 +37,5 @@ import {renderer} from "@b9g/crank/dom";
 
-[Try on CodeSandbox](https://codesandbox.io/s/a-simple-crank-component-mhciu)
+#### A Stateful Component
 
-### A Stateful Component
-```jsx
+```jsx live
 /** @jsx createElement */
@@ -94,6 +63,5 @@ import {createElement} from "@b9g/crank";
 
-[Try on CodeSandbox](https://codesandbox.io/s/a-stateful-crank-component-hh8zx)
+#### An Async Component
 
-### An Async Component
-```jsx
+```jsx live
 /** @jsx createElement */
@@ -116,6 +84,5 @@ import {createElement} from "@b9g/crank";
 
-[Try on CodeSandbox](https://codesandbox.io/s/an-async-crank-component-ru02q)
+### A Loading Component
 
-### A Loading Component
-```jsx
+```jsx live
 /** @jsx createElement */
@@ -174,3 +141,1 @@ import {createElement, Fragment} from "@b9g/crank";
 ```
-
-[Try on CodeSandbox](https://codesandbox.io/s/a-loading-crank-component-pci9d)

No alert changes

Improved metrics

Total package byte prevSize

1034841

increased by18.31%

Number of package files

30

increased by20%

Lines of code

7509

increased by13.96%

Worsened metrics

Number of lines in readme file

137

decreased by-20.35%

No dependency changes