@bikeshaving/crank
Advanced tools
@bikeshaving/crank - npm Package Compare versions
Comparing version 0.1.0-beta.9 to 0.1.0
| { | ||
| "name": "@bikeshaving/crank", | ||
| "version": "0.1.0-beta.9", | ||
| "version": "0.1.0", | ||
| "license": "MIT", | ||
@@ -5,0 +5,0 @@ "description": "JSX-based components with functions, promises and generators.", |
| # Crank.js | ||
| A JavaScript framework for writing JSX-driven components with functions, generators and promises. | ||
| Write JSX-driven components with functions, promises and generators. | ||
| I wrote a blog post describing the motivations and journey behind making Crank [here](https://github.com/brainkim/crank/blob/master/docs/blog/introducing-crank.md). Crank is in an early beta, and some APIs may be changed. | ||
| ## Features | ||
| ### Declarative components | ||
| Crank uses the same JSX syntax and diffing algorithm popularized by React, allowing you to write HTML-like code directly in your JavaScript. | ||
| A documentation is in the works, where we dogfood Crank. In the meantime you can access the docs as markdown files in the docs directory. | ||
| ## Features | ||
| ### JSX-based elements | ||
| Crank uses the same JSX syntax and element diffing algorithm popularized by React, so you can write declarative code which looks like HTML directly in your JavaScript. The portability of elements means you can reuse the same code to render DOM nodes on the client and HTML strings on the server. | ||
| ### Just JavaScript™ | ||
| All components in Crank are just functions or generator functions. No classes, hooks, proxies or template languages are needed. | ||
| ### Components as functions and generators | ||
| Crank uses functions and generators for components exclusively. No fancy classes, hooks, proxies or template languages are needed, and you can take advantage of the natural lifecycle of generators to write stateful setup, update and teardown logic all in the same scope. | ||
| ### Promises today | ||
| Crank provides first-class support for promises by allowing components to be defined as async functions and generators. You can `await` the rendering of async components just like any other async function, and you can even race renderings to create user interfaces with deferred loading states. | ||
| Crank provides first-class support for promises. You can use async/await directly in components, and race components to display fallback UIs. | ||
| ## Getting Started | ||
| ## Installation | ||
| Crank is available on [NPM](https://npmjs.org/@bikeshaving/crank) in the ESModule and CommonJS formats. | ||
| ``` | ||
| ```shell | ||
| $ npm install @bikeshaving/crank | ||
@@ -46,3 +43,3 @@ ``` | ||
| ```jsx | ||
| /* @jsx createElement */ | ||
| /** @jsx createElement */ | ||
| import {createElement} from "@bikeshaving/crank"; | ||
@@ -60,3 +57,3 @@ import {renderer} from "@bikeshaving/crank/dom"; | ||
| [Try on CodeSandbox](https://codesandbox.io/s/a-simple-crank-component-mhciu) | ||
| [Try on CodeSandbox](https://codesandbox.io/s/a-simple-crank-component-gnknz) | ||
@@ -107,3 +104,2 @@ ### A Stateful Component | ||
| ### A Loading Component | ||
| ```jsx | ||
@@ -114,8 +110,10 @@ /** @jsx createElement */ | ||
| async function Fallback({wait = 1000, children}) { | ||
| await new Promise(resolve => setTimeout(resolve, wait)); | ||
| return <Fragment>{children}</Fragment>; | ||
| async function LoadingIndicator() { | ||
| await new Promise(resolve => setTimeout(resolve, 1000)); | ||
| return <div>Fetching a good boy...</div>; | ||
| } | ||
| async function RandomDog({throttle = false}) { | ||
| const res = await fetch("https://dog.ceo/api/breeds/image/random"); | ||
| const data = await res.json(); | ||
| if (throttle) { | ||
@@ -125,4 +123,2 @@ await new Promise(resolve => setTimeout(resolve, 2000)); | ||
| const res = await fetch("https://dog.ceo/api/breeds/image/random"); | ||
| const data = await res.json(); | ||
| return ( | ||
@@ -135,9 +131,5 @@ <a href={data.message}> | ||
| async function* RandomDogLoader({throttle}) { | ||
| async function *RandomDogLoader({throttle}) { | ||
| for await ({throttle} of this) { | ||
| yield ( | ||
| <Fallback> | ||
| <div>Fetching a good boy...</div> | ||
| </Fallback> | ||
| ); | ||
| yield <LoadingIndicator /> | ||
| yield <RandomDog throttle={throttle} />; | ||
@@ -147,3 +139,3 @@ } | ||
| function* RandomDogs() { | ||
| function *RandomDogApp() { | ||
| let throttle = false; | ||
@@ -169,5 +161,5 @@ this.addEventListener("click", (ev) => { | ||
| renderer.render(<RandomDogs />, document.body); | ||
| renderer.render(<RandomDogApp />, document.body); | ||
| ``` | ||
| [Try on CodeSandbox](https://codesandbox.io/s/a-loading-crank-component-pci9d) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-0.31%
296073
- Number of lines in readme file
- decreased by-4.82%
158