{"id":13433198,"url":"https://github.com/bikeshaving/crank","last_synced_at":"2025-05-13T18:09:26.376Z","repository":{"id":37346502,"uuid":"206439707","full_name":"bikeshaving/crank","owner":"bikeshaving","description":"The Just JavaScript Framework","archived":false,"fork":false,"pushed_at":"2025-05-08T00:59:07.000Z","size":23272,"stargazers_count":2705,"open_issues_count":24,"forks_count":75,"subscribers_count":38,"default_branch":"main","last_synced_at":"2025-05-09T08:42:56.808Z","etag":null,"topics":["components","crank","framework","generators","javascript","jsx","promises"],"latest_commit_sha":null,"homepage":"https://crank.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bikeshaving.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-09-05T00:27:50.000Z","updated_at":"2025-04-24T17:11:23.000Z","dependencies_parsed_at":"2023-12-30T05:21:45.064Z","dependency_job_id":"5cec4ead-6d64-49d2-b05b-8b22a306cc2a","html_url":"https://github.com/bikeshaving/crank","commit_stats":{"total_commits":1518,"total_committers":27,"mean_commits":56.22222222222222,"dds":"0.17325428194993409","last_synced_commit":"f97710c6090dabc46aaad0ad38273975217eae3b"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bikeshaving%2Fcrank","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bikeshaving%2Fcrank/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bikeshaving%2Fcrank/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bikeshaving%2Fcrank/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bikeshaving","download_url":"https://codeload.github.com/bikeshaving/crank/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000851,"owners_count":21997441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","crank","framework","generators","javascript","jsx","promises"],"created_at":"2024-07-31T02:01:22.341Z","updated_at":"2025-05-13T18:09:26.349Z","avatar_url":"https://github.com/bikeshaving.png","language":"TypeScript","readme":"## Try Crank\n\nThe fastest way to try Crank is via the [online playground](https://crank.js.org/playground). In addition, many of the code examples in these guides feature live previews.\n\n## Installation\n\nThe Crank package is available on [NPM](https://npmjs.org/@b9g/crank) through\nthe [@b9g organization](https://www.npmjs.com/org/b9g) (short for\nb*ikeshavin*g).\n\n```shell\nnpm i @b9g/crank\n```\n\n### Importing Crank with the **classic** JSX transform.\n\n```jsx live\n/** @jsx createElement */\n/** @jsxFrag Fragment */\nimport {createElement, Fragment} from \"@b9g/crank\";\nimport {renderer} from \"@b9g/crank/dom\";\n\nrenderer.render(\n  \u003cp\u003eThis paragraph element is transpiled with the classic transform.\u003c/p\u003e,\n  document.body,\n);\n```\n\n### Importing Crank with the **automatic** JSX transform.\n\n```jsx live\n/** @jsxImportSource @b9g/crank */\nimport {renderer} from \"@b9g/crank/dom\";\n\nrenderer.render(\n  \u003cp\u003eThis paragraph element is transpiled with the automatic transform.\u003c/p\u003e,\n  document.body,\n);\n```\n\nYou will likely have to configure your tools to support JSX, especially if you do not want to use `@jsx` comment pragmas. See below for common tools and configurations.\n\n### Importing the JSX template tag.\n\nStarting in version `0.5`, the Crank package ships a [tagged template function](/guides/jsx-template-tag) which provides similar syntax and semantics as the JSX transform. This allows you to write Crank components in vanilla JavaScript.\n\n```js live\nimport {jsx} from \"@b9g/crank/standalone\";\nimport {renderer} from \"@b9g/crank/dom\";\n\nrenderer.render(jsx`\n  \u003cp\u003eNo transpilation is necessary with the JSX template tag.\u003c/p\u003e\n`, document.body);\n```\n\n### ECMAScript Module CDNs\nCrank is also available on CDNs like [unpkg](https://unpkg.com)\n(https://unpkg.com/@b9g/crank?module) and [esm.sh](https://esm.sh)\n(https://esm.sh/@b9g/crank) for usage in ESM-ready environments.\n\n```jsx live\n/** @jsx createElement */\n\n// This is an ESM-ready environment!\n// If code previews work, your browser is an ESM-ready environment!\n\nimport {createElement} from \"https://unpkg.com/@b9g/crank/crank?module\";\nimport {renderer} from \"https://unpkg.com/@b9g/crank/dom?module\";\n\nrenderer.render(\n  \u003cdiv id=\"hello\"\u003e\n    Running on \u003ca href=\"https://unpkg.com\"\u003eunpkg.com\u003c/a\u003e\n  \u003c/div\u003e,\n  document.body,\n);\n```\n\n## Common tool configurations\nThe following is an incomplete list of configurations to get started with Crank.\n\n### [TypeScript](https://www.typescriptlang.org)\n\nTypeScript is a typed superset of JavaScript.\n\nHere’s the configuration you will need to set up automatic JSX transpilation.\n\n```tsconfig.json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"@b9g/crank\"\n  }\n}\n```\n\nThe classic transform is supported as well.\n\n```tsconfig.json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"createElement\",\n    \"jsxFragmentFactory\": \"Fragment\"\n  }\n}\n```\n\nCrank is written in TypeScript. Refer to [the guide on TypeScript](/guides/working-with-typescript) for more information about Crank types.\n\n```tsx\nimport type {Context} from \"@b9g/crank\";\nfunction *Timer(this: Context) {\n  let seconds = 0;\n  const interval = setInterval(() =\u003e {\n    seconds++;\n    this.refresh();\n  }, 1000);\n  for ({} of this) {\n    yield \u003cdiv\u003eSeconds: {seconds}\u003c/div\u003e;\n  }\n\n  clearInterval(interval);\n}\n```\n\n### [Babel](https://babeljs.io)\n\nBabel is a popular open-source JavaScript compiler which allows you to write code with modern syntax (including JSX) and run it in environments which do not support the syntax.\n\nHere is how to get Babel to transpile JSX for Crank.\n\nAutomatic transform:\n```.babelrc.json\n{\n  \"plugins\": [\n    \"@babel/plugin-syntax-jsx\",\n    [\n      \"@babel/plugin-transform-react-jsx\",\n      {\n        \"runtime\": \"automatic\",\n        \"importSource\": \"@b9g/crank\",\n\n        \"throwIfNamespace\": false,\n        \"useSpread\": true\n      }\n    ]\n  ]\n}\n```\n\nClassic transform:\n```.babelrc.json\n{\n  \"plugins\": [\n    \"@babel/plugin-syntax-jsx\",\n    [\n      \"@babel/plugin-transform-react-jsx\",\n      {\n        \"runtime\": \"class\",\n        \"pragma\": \"createElement\",\n        \"pragmaFrag\": \"''\",\n\n        \"throwIfNamespace\": false,\n        \"useSpread\": true\n      }\n    ]\n  ]\n}\n```\n\n### [ESLint](https://eslint.org)\n\nESLint is a popular open-source tool for analyzing and detecting problems in JavaScript code.\n\nCrank provides a configuration preset for working with ESLint under the package name `eslint-plugin-crank`.\n\n```bash\nnpm i eslint eslint-plugin-crank\n```\n\nIn your eslint configuration:\n\n```.eslintrc.json\n{\n  \"extends\": [\"plugin:crank/recommended\"]\n}\n```\n\n### [Astro](https://astro.build)\n\nAstro.js is a modern static site builder and framework.\n\nCrank provides an [Astro integration](https://docs.astro.build/en/guides/integrations-guide/) to enable server-side rendering and client-side hydration with Astro.\n\n```bash\nnpm i astro-crank\n```\n\nIn your `astro.config.mjs`.\n\n```astro.config.mjs\nimport {defineConfig} from \"astro/config\";\nimport crank from \"astro-crank\";\n\n// https://astro.build/config\nexport default defineConfig({\n  integrations: [crank()],\n});\n```\n\n## Key Examples\n\n### A Simple Component\n\n```jsx live\nimport {renderer} from \"@b9g/crank/dom\";\n\nfunction Greeting({name = \"World\"}) {\n  return (\n    \u003cdiv\u003eHello {name}\u003c/div\u003e\n  );\n}\n\nrenderer.render(\u003cGreeting /\u003e, document.body);\n```\n\n### A Stateful Component\n\n```jsx live\nimport {renderer} from \"@b9g/crank/dom\";\n\nfunction *Timer() {\n  let seconds = 0;\n  const interval = setInterval(() =\u003e {\n    seconds++;\n    this.refresh();\n  }, 1000);\n  try {\n    while (true) {\n      yield \u003cdiv\u003eSeconds: {seconds}\u003c/div\u003e;\n    }\n  } finally {\n    clearInterval(interval);\n  }\n}\n\nrenderer.render(\u003cTimer /\u003e, document.body);\n```\n\n### An Async Component\n\n```jsx live\nimport {renderer} from \"@b9g/crank/dom\";\nasync function Definition({word}) {\n  // API courtesy https://dictionaryapi.dev\n  const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);\n  const data = await res.json();\n  if (!Array.isArray(data)) {\n    return \u003cp\u003eNo definition found for {word}\u003c/p\u003e;\n  }\n\n  const {phonetic, meanings} = data[0];\n  const {partOfSpeech, definitions} = meanings[0];\n  const {definition} = definitions[0];\n  return \u003c\u003e\n    \u003cp\u003e{word} \u003ccode\u003e{phonetic}\u003c/code\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cb\u003e{partOfSpeech}.\u003c/b\u003e {definition}\u003c/p\u003e\n  \u003c/\u003e;\n}\n\nawait renderer.render(\u003cDefinition word=\"framework\" /\u003e, document.body);\n```\n\n### A Loading Component\n\n```jsx live\nimport {Fragment} from \"@b9g/crank\";\nimport {renderer} from \"@b9g/crank/dom\";\n\nasync function LoadingIndicator() {\n  await new Promise(resolve =\u003e setTimeout(resolve, 1000));\n  return \u003cdiv\u003eFetching a good boy...\u003c/div\u003e;\n}\n\nasync function RandomDog({throttle = false}) {\n  const res = await fetch(\"https://dog.ceo/api/breeds/image/random\");\n  const data = await res.json();\n  if (throttle) {\n    await new Promise(resolve =\u003e setTimeout(resolve, 2000));\n  }\n\n  return (\n    \u003ca href={data.message}\u003e\n      \u003cimg src={data.message} alt=\"A Random Dog\" width=\"300\" /\u003e\n    \u003c/a\u003e\n  );\n}\n\nasync function *RandomDogLoader({throttle}) {\n  for await ({throttle} of this) {\n    yield \u003cLoadingIndicator /\u003e;\n    yield \u003cRandomDog throttle={throttle} /\u003e;\n  }\n}\n\nfunction *RandomDogApp() {\n  let throttle = false;\n  this.addEventListener(\"click\", (ev) =\u003e {\n    if (ev.target.tagName === \"BUTTON\") {\n      throttle = !throttle;\n      this.refresh();\n    }\n  });\n\n  for ({} of this) {\n    yield (\n      \u003cFragment\u003e\n        \u003cRandomDogLoader throttle={throttle} /\u003e\n        \u003cp\u003e\n          \u003cbutton\u003eShow me another dog.\u003c/button\u003e\n        \u003c/p\u003e\n      \u003c/Fragment\u003e\n    );\n  }\n}\n\nrenderer.render(\u003cRandomDogApp /\u003e, document.body);\n```\n","funding_links":[],"categories":["TypeScript","framework","Related","javascript","Functional Programming"],"sub_categories":["These are libraries I have found that seem to be atleast tangentially related to the Concur model."],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbikeshaving%2Fcrank","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbikeshaving%2Fcrank","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbikeshaving%2Fcrank/lists"}