{"id":22210370,"url":"https://github.com/framework7io/rollup-plugin-framework7","last_synced_at":"2025-07-27T10:31:36.832Z","repository":{"id":65491413,"uuid":"339987535","full_name":"framework7io/rollup-plugin-framework7","owner":"framework7io","description":"Rollup \u0026 Vite plugin to load Framework7 single file components","archived":false,"fork":false,"pushed_at":"2024-03-19T06:21:13.000Z","size":192,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-09T19:04:13.422Z","etag":null,"topics":["rollup","vite"],"latest_commit_sha":null,"homepage":"https://framework7.io","language":"JavaScript","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/framework7io.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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},"funding":{"patreon":"framework7","open_collective":"framework7"}},"created_at":"2021-02-18T08:45:18.000Z","updated_at":"2021-12-09T08:04:46.000Z","dependencies_parsed_at":"2024-09-22T19:07:01.816Z","dependency_job_id":"6b434aef-6659-430d-a982-bbf082458845","html_url":"https://github.com/framework7io/rollup-plugin-framework7","commit_stats":{"total_commits":12,"total_committers":1,"mean_commits":12.0,"dds":0.0,"last_synced_commit":"a477eda52c654a45738b7fc9473c2a48e67aea80"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/framework7io%2Frollup-plugin-framework7","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/framework7io%2Frollup-plugin-framework7/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/framework7io%2Frollup-plugin-framework7/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/framework7io%2Frollup-plugin-framework7/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/framework7io","download_url":"https://codeload.github.com/framework7io/rollup-plugin-framework7/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227558632,"owners_count":17786684,"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":["rollup","vite"],"created_at":"2024-12-02T20:11:51.404Z","updated_at":"2024-12-02T20:11:53.939Z","avatar_url":"https://github.com/framework7io.png","language":"JavaScript","funding_links":["https://patreon.com/framework7","https://opencollective.com/framework7"],"categories":[],"sub_categories":[],"readme":"# Rollup Framework7 Component Loader\n\n\u003e Rollup \u0026 Vite plugin to load Framework7 single file components\n\n## What is Framework7 Component Loader?\n\n`rollup-plugin-framework7` is a plugin for [Rollup](https://rollupjs.org/guide/en/) and [Vite](https://vitejs.dev) that allows you to author [Framework7 Router components](http://framework7.io/docs/router-component.html) in a format called [Single-File Components](http://framework7.io/docs/router-component.html#single-file-component):\n\n```html\n\u003c!-- my-page.f7.html (or my-page.f7) --\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"page\"\u003e${msg}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default () =\u003e {\n    const msg = 'Hello world';\n\n    return $render;\n  };\n\u003c/script\u003e\n```\n\n## Usage with Rollup\n\nInstall the plugin itself:\n\n```\nnpm i rollup-plugin-framework7 --save-dev\n```\n\nIf we use JSX component, then we also need to install Babel plugins:\n\n```\nnpm i @rollup/plugin-babel @babel/preset-react @babel/preset-env --save-dev\n```\n\nConfigure rollup:\n\n```js\nconst { rollup } = require('rollup');\nconst { babel } = require('@rollup/plugin-babel');\nconst framework7 = require('../lib/index');\nrollup({\n  input: './path/to/app.js',\n  plugins: [\n    // enable Framework7 plugin\n    // it will will process .f7.html and .f7.js(x) files\n    framework7({ emitCss: true }),\n\n    // css plugin for bundling content of component styles (`\u003cstyle\u003e`)\n    css({ output: 'app-bundle.css' }),\n\n    // babel plugin if you use JSX components\n    babel({\n      presets: [\n        '@babel/preset-react',\n        [\n          '@babel/preset-env',\n          {\n            modules: false,\n          },\n        ],\n      ],\n    }),\n  ],\n});\n```\n\n## Usage with Vite\n\nInstall the plugin:\n\n```\nnpm i rollup-plugin-framework7 --save-dev\n```\n\nIn Vite config (`vite.config.js`):\n\n```js\nimport framework7 from 'rollup-plugin-framework7';\n\nexport default {\n  esbuild: {\n    jsxFactory: '$jsx',\n  },\n  plugins: [framework7({ emitCss: false })],\n};\n```\n\n## JSX\n\nFramework7 v6 single file components also support JSX:\n\n```html\n\u003c!-- my-page.f7.html (or my-page.f7) --\u003e\n\u003cscript\u003e\n  export default () =\u003e {\n    const msg = 'Hello world';\n\n    return () =\u003e \u003cdiv class=\"page\"\u003e{msg}\u003c/div\u003e;\n  };\n\u003c/script\u003e\n```\n\n```js\n// my-page.f7.js\n\nexport default () =\u003e {\n  const msg = 'Hello world';\n\n  return () =\u003e \u003cdiv class=\"page\"\u003e{msg}\u003c/div\u003e;\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fframework7io%2Frollup-plugin-framework7","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fframework7io%2Frollup-plugin-framework7","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fframework7io%2Frollup-plugin-framework7/lists"}