{"id":20083654,"url":"https://github.com/marko-js/arc-vite","last_synced_at":"2026-01-26T08:34:56.935Z","repository":{"id":206550318,"uuid":"716322558","full_name":"marko-js/arc-vite","owner":"marko-js","description":"Declaratively bundle and execute code specific to your users using ARC with Vite.","archived":false,"fork":false,"pushed_at":"2025-09-13T02:17:49.000Z","size":519,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-10-24T01:54:51.486Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/marko-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-11-08T22:30:03.000Z","updated_at":"2025-09-13T15:19:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"3b7b897d-5fba-4ad7-9bdc-ab030403582f","html_url":"https://github.com/marko-js/arc-vite","commit_stats":null,"previous_names":["marko-js/arc-vite"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/marko-js/arc-vite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Farc-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Farc-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Farc-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Farc-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marko-js","download_url":"https://codeload.github.com/marko-js/arc-vite/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Farc-vite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28770881,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T07:45:00.504Z","status":"ssl_error","status_checked_at":"2026-01-26T07:45:00.070Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-11-13T15:48:18.386Z","updated_at":"2026-01-26T08:34:56.914Z","avatar_url":"https://github.com/marko-js.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003c!-- Logo --\u003e\n  \u003cbr/\u003e\n  arc-vite\n\t\u003cbr/\u003e\n\n  \u003c!-- Language --\u003e\n  \u003ca href=\"http://typescriptlang.org\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/%3C%2F%3E-typescript-blue.svg\" alt=\"TypeScript\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Format --\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg\" alt=\"Styled with prettier\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- CI --\u003e\n  \u003ca href=\"https://github.com/marko-js/arc-vite/actions/workflows/ci.yml\"\u003e\n    \u003cimg src=\"https://github.com/marko-js/arc-vite/actions/workflows/ci.yml/badge.svg\" alt=\"Build status\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Coverage --\u003e\n  \u003ca href=\"https://codecov.io/gh/marko-js/arc-vite\"\u003e\n    \u003cimg src=\"https://codecov.io/gh/marko-js/arc-vite/branch/main/graph/badge.svg?token=TODO\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- NPM Version --\u003e\n  \u003ca href=\"https://npmjs.org/package/arc-vite\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/arc-vite.svg\" alt=\"NPM Version\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Downloads --\u003e\n  \u003ca href=\"https://npmjs.org/package/arc-vite\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/arc-vite.svg\" alt=\"Downloads\"/\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n\nDeclaratively bundle and execute code specific to your users using [ARC](https://github.com/ebay/arc) and [Vite](https://vitejs.dev).\n\n# Installation\n\n```console\nnpm install arc-vite\n```\n\n# Configuration\n\nThe only required configuration for `arc-vite` is the `flags` or `flagSets` option. These limit the number of possible flag permutations and allow `arc-vite` to optimally bundle your app.\n\n## Example vite.config.ts\n\n```javascript\nimport { defineConfig } from \"vite\";\nimport arcPlugin from \"arc-vite\";\n\nexport default defineConfig({\n  plugins: [arcPlugin({ flags: [\"mobile\"] })],\n});\n```\n\n### options.flags: (string | string[])[]\n\nAn array where each element is either a `string` or `string[]`. Each string represents an individual flag, and each array of strings represents a group of flags that can be combined. When a `string[]` is provided as an item any combination of those flags will become valid. Note that an empty flag combination (the default flags) is always output.\n\nEg `flags: [\"legacy\", [\"tablet\", \"desktop\"]]` will yield the following exploded flag sets:\n\n```js\n[\n  [], // the empty flag set\n  [\"legacy\"],\n  [\"tablet\"],\n  [\"tablet\", \"legacy\"],\n  [\"desktop\"],\n  [\"desktop\", \"legacy\"],\n];\n```\n\n### options.flagSets: string[][]\n\nAn array of all possible flag combinations. This is lower level than [`options.flags`](#optionsflags-string--string) and allows you to have complete control over the possible flag combinations. The empty flag set is still required automatically added for you.\n\nNote that `arc-vite` also exposes a `createFlagSets` method to create flag combinations similar to [`options.flags`](#optionsflags-string--string) and a `hasFlags` method to filter the flag sets down. This can be useful to create flag combinations and then filter down unnecessary ones.\n\nEg lets say that in the above we want to ensure that the `tablet` flag will never be paired with the `legacy` flag. Using this helpers and the `options.flagSets` we could achieve that with the following example:\n\n```js\nimport { defineConfig } from \"vite\";\nimport arcVite, { createFlagSets, hasFlags } from \"arc-vite\";\n\nexport default defineConfig({\n  plugins: [\n    arcVite({\n      // The below will filter out all flagSets which have `tablet` and `legacy`.\n      // In this case that means `[\"tablet\", \"legacy\"]` and `[\"tablet\", \"legacy\", \"experiment\"]` will be removed.\n      flagSets: createFlagSets([\n        \"legacy\",\n        \"experiment\",\n        [\"tablet\", \"desktop\"],\n      ]).filter((flagSet) =\u003e hasFlags(flagSet, [\"tablet\", \"legacy\"])),\n    }),\n  ],\n});\n```\n\n### options.runtimeId?: string\n\nFor inter chunk communication `arc-vite` uses a global variable in the browser.\nTo avoid conflicts with multiple copies of `arc-vite` prepared assets loaded into a single page you can provide a valid javascript identifier as a string to use as the global.\n\n# Setting arc flags.\n\n## Development\n\nIn development `arc-vite` does not _currently_ support runtime adaptive flags.\nInstead you can configure the current flags to use by setting the `FLAGS` environment variable with dot (`.`) separated flags.\n\nEg when running your vite server\n\n```console\nFLAGS=mobile node ./my-server.js\n```\n\n## Production\n\nSetting arc flags for production is the same as other implementations of arc. Use arc-server's [`setFlags` api](https://github.com/eBay/arc/tree/master/packages/arc-server#setflags).\nBelow is an example of a simple http server that exposes `mobile` arc flag based on the user agent.\n\n```javascript\nimport https from \"https\"\nimport { setFlags } from \"arc-server\"\n\nhttps.createServer(..., (req, res) =\u003e {\n  setFlags({\n    mobile: req.getHeader(\"Sec-CH-UA-Mobile\") === \"?1\"\n  });\n\n  // run app code\n}).listen(8443);\n```\n\n\u003e **Note:**\n\u003e Setting `process.env.FLAGS` (as described in the [settings flags for development section](#development)) will also work for production builds.\n\u003e When set, the actual flags passed to `setFlags` or `withFlags` are ignored and instead the `process.env.FLAGS` are passed.\n\u003e This can be useful to force a flag set to be used in preview environments.\n\n# Reading browser assets\n\nIf you are using [Marko](http://markojs.com) then the following is **not necessary** since this plugin will communicate with the Marko compiler in order to automatically inline the appropriate assets.\n\nFor other types of setups, this plugin exposes another top level API on `arc-server` called `getAssets`. This method will return an object with HTML to inject into your application given the _currently set_ arc flags.\n\n```javascript\nimport arc from \"arc-server\";\nexport function handleRequest(req, res) {\n  const assets = arc.getAssets(\"index\"); // get all assets for the `index` (default) entry into vite.\n  res.end(`\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  ${assets[\"head-prepend\"] || \"\"}\n  \u003c!-- ... --\u003e\n  ${assets.head || \"\"}\n\u003c/head\u003e\n\u003cbody\u003e\n  ${assets[\"body-prepend\"] || \"\"}\n  \u003c!-- ... --\u003e\n  ${assets.body || \"\"}\n\u003c/body\u003e\n\u003c/html\u003e\n  `);\n}\n```\n\n# Code of Conduct\n\nThis project adheres to the [eBay Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating in this project, you agree to abide by its terms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Farc-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarko-js%2Farc-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Farc-vite/lists"}