{"id":15914670,"url":"https://github.com/complate/complate-fractal","last_synced_at":"2026-01-20T00:40:21.747Z","repository":{"id":49091240,"uuid":"98413979","full_name":"complate/complate-fractal","owner":"complate","description":"complate adapter for Fractal","archived":false,"fork":false,"pushed_at":"2024-01-11T17:19:55.000Z","size":117,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-16T17:05:19.278Z","etag":null,"topics":["complate","fractal","javascript","jsx","styleguide"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/complate.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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}},"created_at":"2017-07-26T11:08:14.000Z","updated_at":"2022-07-29T12:55:48.000Z","dependencies_parsed_at":"2024-10-28T15:25:15.046Z","dependency_job_id":"954dc02d-b1e2-406a-b435-aee26d9b1244","html_url":"https://github.com/complate/complate-fractal","commit_stats":{"total_commits":94,"total_committers":4,"mean_commits":23.5,"dds":0.4787234042553191,"last_synced_commit":"4ce00b4c334f709787cf854fa8b63b8916f952c9"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/complate%2Fcomplate-fractal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/complate%2Fcomplate-fractal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/complate%2Fcomplate-fractal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/complate%2Fcomplate-fractal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/complate","download_url":"https://codeload.github.com/complate/complate-fractal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247779789,"owners_count":20994569,"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":["complate","fractal","javascript","jsx","styleguide"],"created_at":"2024-10-06T17:05:10.967Z","updated_at":"2026-01-20T00:40:21.711Z","avatar_url":"https://github.com/complate.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# complate Adapter for Fractal\n\n[![Build Status](https://travis-ci.org/complate/complate-fractal.svg?branch=master)](https://travis-ci.org/complate/complate-fractal)\n[![Greenkeeper badge](https://badges.greenkeeper.io/complate/complate-fractal.svg)](https://greenkeeper.io/)\n\n**Note:** Because of the security vulnerabilities in the [official fractal branch],\ncomplate-fractal now uses [this fork](https://github.com/joyheron/fractal).\n\n## Installation\n\nAdd complate-fractal to your Fractal-based styleguide project:\n\n    npm install complate-fractal\n\nor\n\n    yarn add complate-fractal\n\n## Configuring Fractal\n\nIn your project's `fractal.config.js`, you need to register complate as templating engine:\n\n```javascript\nlet fractal = module.exports = require('fractal-fork').fractal.create()\nlet complate = require('complate-fractal')\n\n…\n\nfractal.components.engine(complate({\n  rootDir: __dirname,\n  generateURI: function(uri) {\n    // NB: invocation context is `{ assetPath }`, providing access to\n    //     Fractal-specific URI generation\n    return this.assetPath(uri)\n  }\n}));\n```\n\n`rootDir` specifies which directory component samples' import paths are relative to:\n\n```jsx\nimport MyWidget from './components/my-widget'\n\n\u003cMyWidget …\u003e\n```\n\n`generateURI` implements an application-specific URI helper, provided to\ncomponents via the application context (via `envPath`, defaults to `env.js`):\n\n```javascript\n// application-specific context; this will be populated (i.e. mutated) at\n// runtime by the respective application\nexports.context = {\n  uri: function toBeDefined() {\n    throw new Error(\"application context is not defined\");\n  }\n};\n```\n\n```jsx\nimport { context } from '../env'\n\nexport default function MyWidget (params, ...children) {\n  let uri = context.uri('/path/to/resource')\n  …\n}\n```\n\nIn addition, you need to provide a `PreviewLayout` component (via `previewPath`,\nwhich defaults to `_preview.jsx` within the components directory):\n\n```jsx\nexport default function PreviewLayout({ context }, ...children) {\n  return \u003chtml lang=\"en\"\u003e\n    …\n    \u003cbody\u003e\n      …\n      {children}\n      …\n    \u003c/body\u003e\n  \u003c/html\u003e;\n}\n```\n\n## Usage with Fractal\n\n### Context\n\nYou need to reference context values via the `context` object:\n\n```jsx\n\u003cMyWidget\u003e{context.my_label}\u003c/MyWidget\u003e\n```\n\n### Referencing components\n\nFractal (with Handlebars) brings support for including existing components\nwithin others:\n\n```handlebars\n\u003cdiv class=\"my-component\"\u003e\n  {{\u003e @my_other_component }}\n\u003c/div\u003e\n```\n\ncomplate has its own way for doing that by using HTML expansion without any\nspecial markers or syntax you have to remember:\n\n```jsx\n\u003cMyComponent\u003e\n  \u003cMyOtherComponent /\u003e\n\u003c/MyComponent\u003e\n```\n\nTherefore we don’t support Fractal's `@`-prefixed view handlers for now.\n\n## Examples\n\n- [innoQ Styleguide and Component Library](https://github.com/innoq/innoq-styleguide)\n\n## Development\n\n### Release\n\n1. Increment version number in `package.json`\n2. Commit as \"vX.X.X\"\n3. `git tag -am \"vX.X.X\" \"vX.X.X\"`\n4. `git push --follow-tags`\n4. `npm publish`\n\n[official fractal branch]: https://github.com/frctl/fractal\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomplate%2Fcomplate-fractal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomplate%2Fcomplate-fractal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomplate%2Fcomplate-fractal/lists"}