{"id":16328432,"url":"https://github.com/eBay/arc","last_synced_at":"2025-10-25T20:32:56.015Z","repository":{"id":21972352,"uuid":"94586962","full_name":"eBay/arc","owner":"eBay","description":"adaptive resources and components","archived":false,"fork":false,"pushed_at":"2023-11-09T22:45:14.000Z","size":2336,"stargazers_count":35,"open_issues_count":7,"forks_count":18,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-13T23:55:31.141Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/eBay.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2017-06-16T22:57:58.000Z","updated_at":"2024-02-08T15:44:32.000Z","dependencies_parsed_at":"2023-01-12T03:46:08.336Z","dependency_job_id":"67b4600e-0091-4f56-9c78-fe346df24ade","html_url":"https://github.com/eBay/arc","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eBay%2Farc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eBay%2Farc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eBay%2Farc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eBay%2Farc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eBay","download_url":"https://codeload.github.com/eBay/arc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238207673,"owners_count":19434095,"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":[],"created_at":"2024-10-10T23:14:19.488Z","updated_at":"2025-10-25T20:32:55.529Z","avatar_url":"https://github.com/eBay.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n   \u003cimg width=\"300\" src=\"./logo.png\"/\u003e\n\n   \u003cbr/\u003e\n\n   \u003ca href=\"https://www.ebay.com\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/ebay-open%20source-01d5c2.svg\" alt=\"ebay open source\"/\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://img.shields.io/github/license/eBay/arc.svg\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/license/eBay/arc.svg\" alt=\"MIT licensed\"/\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://travis-ci.org/eBay/arc\"\u003e\n      \u003cimg src=\"https://travis-ci.org/eBay/arc.svg?branch=master\" alt=\"travisci build\"/\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://codecov.io/gh/eBay/arc\"\u003e\n     \u003cimg src=\"https://codecov.io/gh/eBay/arc/branch/master/graph/badge.svg\" alt=\"Codecov\" /\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://www.npmjs.com/package/arc-resolver\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/arc-resolver.svg\" alt=\"npm version\"/\u003e\n   \u003c/a\u003e\n   \u003ca href=\"http://npm-stat.com/charts.html?package=arc-resolver\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dm/arc-resolver.svg\" alt=\"downloads\"/\u003e\n   \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n`arc` uses “flags” and a file naming convention to generate and serve a bundle that contains only the resources used by the requesting environment. This allows building web applications that serve only the code necessary for multiple device types, locales, brands - _all from a single codebase_.\n\nThe flexibility of `arc` enables diverging components only when necessary. It works for both client + server and is not bound to any specific framework.\n\n## How it works\n\n`arc` adapts files based on a filenaming convension:\n\n```webidl\nstyle.css\nstyle[mobile].css\nstyle[mobile+android].css\n```\n\nHowever, you write your application as though the flagged version of files did not exist:\n\n```css\n@import url('./style.css');\n```\n\nIf both the `mobile` and `android` flags are set, when bundling the css, `style[mobile+android].css` will replace `style.css` in the output bundle. If only the `mobile` flag is set, `style[mobile].css` will be used.\n\n### More on flags\n\n- Read how to set flags in the documentation for each [supported environment](#supported-environments).\n\n- Read more about defining [flags in filenames](./packages/arc-resolver/README.md#defining-flags).\n\n## Use cases\n\n### Multiple platforms\n\nFor example, swap out a header component based on the user's device type:\n\n```webidl\nheader[mobile].js\nheader[desktop].js\n```\n\nThen, in your React component:\n\n```jsx\nimport Header from \"./header.js\";\n\nexport default () =\u003e (\n   \u003cHeader/\u003e\n);\n```\n\n### Internationalization (i18n)\n\nFor example, swap out a content bundle based on the user's locale:\n\n```webidl\ncontent[de].json\ncontent[en].json\ncontent[es].json\ncontent[fr].json\n```\n\nThen, in your Marko component:\n\n```marko\nimport content from \"./content.json\";\n\n\u003ch1\u003e${content.welcomeMessage}\u003c/h1\u003e\n```\n\n### Branding\n\nFor example, swap out a logo based on the brand the user is visiting:\n\n```webidl\nlogo[ebay].svg\nlogo[gumtree].svg\nlogo[vivanuncious].svg\n```\n\nThen, in your `.html` file:\n\n```html\n\u003cimg src=\"./logo.svg\"/\u003e\n```\n\n### Experimentation\n\nFor example, swap out a component based on the user's participation in an experiment:\n\n```webidl\ndate-picker/\n   date-picker.component.css\n   date-picker.component.html\n   date-picker.component.ts\ndate-picker[date_experiment_a]/\n   date-picker.component.css\n   date-picker.component.html\n   date-picker.component.ts\n```\n\nThen, in your Angular module:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { DatePickerComponent } from './date-picker/date-picker.component';\n\n@NgModule({\n  declarations: [\n    DatePickerComponent\n  ]\n})\nexport class MyModule { }\n```\n\n## Supported environments\n\nPlease refer to the linked documentation for using `arc` in each environment:\n\n- Node 8+ ([`arc-server`](./packages/arc-server))\n- Webpack 4+ ([`arc-webpack`](./packages/arc-webpack))\n- Lasso 3+ ([`arc-lasso`](./packages/arc-lasso))\n\n## Additional resources\n\n### Connie \u0026 Michael on `arc 1.0` @ Fluent O'Reilly Conf 2017:\n\n- [Session abstract](https://conferences.oreilly.com/fluent/fl-ca/public/schedule/detail/58976)    \n- [Recorded video](https://vimeo.com/229162833/c2727d5436)\n\n### Example apps\n\n- [Simple Server](./packages/example-arc-server)\n- [Isomorphic Koa + Marko + Webpack]() TODO\n- [Isomorphic Express + Marko + Lasso]() TODO\n- [Isomorphic Express + React + Webpack]() TODO\n- [Client-only React + Webpack + `arc-static-server`]() TODO\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FeBay%2Farc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FeBay%2Farc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FeBay%2Farc/lists"}