{"id":15649338,"url":"https://github.com/rajasegar/unpack","last_synced_at":"2025-04-13T18:40:20.965Z","repository":{"id":40434959,"uuid":"312496448","full_name":"rajasegar/unpack","owner":"rajasegar","description":"Create Web apps without a bundler","archived":false,"fork":false,"pushed_at":"2025-04-08T11:06:26.000Z","size":817,"stargazers_count":40,"open_issues_count":6,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T12:23:36.621Z","etag":null,"topics":["bundler","esm","esmodules","unpack"],"latest_commit_sha":null,"homepage":"","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/rajasegar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2020-11-13T06:53:24.000Z","updated_at":"2025-01-11T14:46:46.000Z","dependencies_parsed_at":"2023-10-15T13:20:13.069Z","dependency_job_id":"11e2b3f3-94da-4db4-a5f8-2cf477b534c9","html_url":"https://github.com/rajasegar/unpack","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Funpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Funpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Funpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Funpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajasegar","download_url":"https://codeload.github.com/rajasegar/unpack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248764162,"owners_count":21158035,"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":["bundler","esm","esmodules","unpack"],"created_at":"2024-10-03T12:29:19.026Z","updated_at":"2025-04-13T18:40:20.943Z","avatar_url":"https://github.com/rajasegar.png","language":"JavaScript","readme":"# unpack\n\n![Build and Deploy](https://github.com/rajasegar/unpack/workflows/Build%20and%20Deploy/badge.svg)\n[![npm version](http://img.shields.io/npm/v/@rajasegar/unpack.svg?style=flat)](https://npmjs.org/package/@rajasegar/unpack \"View this project on npm\")\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n\n\n\n:rocket: Create web apps without a bundler :package:. \n\nunpack is a web app scaffolding tool which generates a project boilerplate with no `npm` dependencies, to develop and build apps within the browser\nwithout any build tooling.\n\n**WARNING**: Not recommended for production workflows.\n\n## Installation\n```\nnpx @rajasegar/unpack\n```\n\nUsing npm\n```\nnpm i -g @rajasegar/unpack\n```\n\nUsing yarn\n```\nyarn add --global @rajasegar/unpack\n```\n\nUsing pnpm\n```\npnpm add --global @rajasegar/unpack\n```\n\n## Usage\n```\nunpack\n```\nFollow the prompts to choose the Framework (React, Preact or Vue) and CDN (Skypack, jspm or unpkg).\n\nThen switch to the newly created app directory and start a web server, something like [http-server](https://github.com/http-party/http-server) or [servor](https://github.com/lukejacksonn/servor). You are free to choose your own web-server tool, there is no lock-in unlike other bundlers.\n\n```\ncd my-react-app\nservor . --reload --browse\n```\n\nYou can also choose from predefined templates for a particular framework using:\n```\nunpack new \u003cproject-name\u003e --template React --cdn skypack\n```\nor \n```\nunpack new my-preact-app -t Preact --cdn skypack\n```\n\nThe `--template` option can have the following values:\n- React\n- Preact\n- Vue\n- Vue3\n- lit-element\n- hyperapp\n- RxJS\n- Cycle\n\nThe `--cdn` option can have the following values:\n- jspm\n- skypack\n- unpkg\n- esm\n- jsdelivr\n- esm.run\n\n\n## index.html (generated)\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003ehello\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\u003c/app\u003e\n  \u003cscript type=\"module\" src=\"https://jspm.dev/es-module-shims\"\u003e\u003c/script\u003e\n  \u003cscript type=\"importmap-shim\"\u003e\n  {\n    \"imports\": {\n      \"react\": \"https://cdn.skypack.dev/react?min\",\n      \"react-dom\": \"https://cdn.skypack.dev/react-dom?min\",\n      \"htm\": \"https://cdn.skypack.dev/htm?min\"\n    }\n  }\n  \u003c/script\u003e\n  \u003cscript type=\"module-shim\"\u003e\n    import React from \"react\";\n    import ReactDOM from \"react-dom\";\n    import htm from \"htm\";\n\n    const html = htm.bind(React.createElement);\n    const App = () =\u003e html`\u003ch1\u003eHello React from skypack\u003c/h1\u003e`;\n\n    ReactDOM.render(html`\u003c${App}/\u003e`, document.getElementById('app'));\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## How does it work?\nIt makes use of CDN for delivering ESM compatible JS to the browser for your favorite JS libraries and frameworks so that you can make use of the module scripts to run code inside your browser. \nIt also makes use of [import maps](https://github.com/wicg/import-maps) to enhance the developer experience to map the absolute package urls to user-friendly names so that you don't have to write import statements like:\n\n```js\nimport React from  'https://unpkg.com/react@17/umd/react.production.min.js';\n```\n\nInstead you can simply use:\n```js\nimport React from 'react';\n```\n\nImport maps are not yet mainstream, since not all the browsers implemented them and Chrome supports it behind a [feature flag](https://developers.chrome.com/extensions/experimental). That's why unpack includes the [es-module-shims](https://github.com/guybedford/es-module-shims) script to work with import maps.\n\n\n## Support Matrix\n| Framework/CDN | Skypack            | jspm               | unpkg              | esm.sh             | jsdelivr           | esm.run            |\n|---------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------|\n| React         | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x:                |\n| Preact        | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |\n| Vue           | :x:                | :heavy_check_mark: | :x:                | :x:                | :x:                | :x:                |\n| Vue 3         | :heavy_check_mark: | :heavy_check_mark: | :x:                | :x:                | :x:                | :x:                |\n| lit-element   | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x:                |\n| hyperapp      | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x:                | :heavy_check_mark: | :heavy_check_mark: |\n| Cycle.js      | :x:                | :heavy_check_mark: | :x:                | :heavy_check_mark: | :x:                | :x:                |\n| RxJS          | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x:                | :x:                |\n\nEdited the above Markdown table with [tablesgenerator.com](https://www.tablesgenerator.com/markdown_tables)\n\n## CDN Support\n- [Skypack](https://skypack.dev)\n- [jspm](https://jspm.dev)\n- [unpkg](https://unpkg.com)\n- [esm.sh](https://esm.sh)\n- [jsdelivr](https://cdn.jsdelivr.net)\n- [esm.run](https://esm.run)\n\n## Framework Support\n- [React](https://reactjs.org)\n- [Vue.js](https://vuejs.org)\n- [Preact](https://preactjs.com)\n- [lit-element](https://lit-element.polymer-project.org/)\n- [hyperapp](https://github.com/jorgebucaran/hyperapp)\n- [RxJS](https://rxjs-dev.firebaseapp.com/)\n- [Cycle.js](https://cycle.js.org)\n\n\n## Bundling for production\nWork in progress...\n\n## Known issues\n- Vue template works only with jspm\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Funpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajasegar%2Funpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Funpack/lists"}