{"id":17068929,"url":"https://github.com/localnerve/web-component-build","last_synced_at":"2025-04-12T19:10:12.320Z","repository":{"id":212159166,"uuid":"729976841","full_name":"localnerve/web-component-build","owner":"localnerve","description":"Assembles and minifies web components from parts, exposing parts for build templates and CSP processing","archived":false,"fork":false,"pushed_at":"2025-02-13T21:27:00.000Z","size":482,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T19:10:03.929Z","etag":null,"topics":["build","build-tool","minifier","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/localnerve.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2023-12-10T23:07:05.000Z","updated_at":"2025-02-13T15:36:49.000Z","dependencies_parsed_at":"2024-01-04T03:29:45.759Z","dependency_job_id":"09383260-7932-4fc4-9e2e-17bd208a5400","html_url":"https://github.com/localnerve/web-component-build","commit_stats":null,"previous_names":["localnerve/web-component-build"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Fweb-component-build","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Fweb-component-build/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Fweb-component-build/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/localnerve%2Fweb-component-build/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/localnerve","download_url":"https://codeload.github.com/localnerve/web-component-build/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618277,"owners_count":21134200,"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":["build","build-tool","minifier","webcomponents"],"created_at":"2024-10-14T11:15:35.861Z","updated_at":"2025-04-12T19:10:12.285Z","avatar_url":"https://github.com/localnerve.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Component Build\n\n\u003e Assembles a web component from css, html, and js parts, assists user build flexibility\n\n[![npm version](https://badge.fury.io/js/@localnerve%2Fweb-component-build.svg)](https://badge.fury.io/js/@localnerve%2Fweb-component-build)\n![Verify](https://github.com/localnerve/web-component-build/workflows/Verify/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/localnerve/web-component-build/badge.svg?branch=main)](https://coveralls.io/github/localnerve/web-component-build?branch=main)\n\nAssembles a web component from its parts, allows developers to author the component's parts in separate files.  \nThe parts are processed and written to an output directory, then exposed to a calling build process.  \n\n  * [Why This Exists](#why-this-exists)\n  * [Processing Possibilities](#processing-map)\n  * [Usage](#usage)\n  * [API](#api)\n  * [Options](#options-object-optional)\n  * [Result](#result-object)\n\n## Why This Exists\n  1. Author web components in separate JS, CSS, and HTML files\n  2. Expose CSS for the web component to builds for computing [CSP hashes](https://github.com/localnerve/csp-hashes#readme)\n  3. Expose HTML for the web component to builds for companion templates and/or DSD for SSR builds\n  4. Enable/ease paying these conveniences forward in web component distribution packages\n\n## Processing Map\nThe following is a table of _some_ of the possible input, processing, and output combos. See [options](#options-object-optional) for detailed explanations.\n\n| input | processing | output |\n| ----- | ---------- | ------ |\n| javascript | minify javascript | javascript |\n| css | minify css | css |\n| html | minify html | html |\n| css, html | minify css, prepend style tag to html, minify html | css, html |\n| css, html, cssHref | minfy css, prepend style tag to html, prepend link tag to html, minify html | css, html |\n| cssHref, html | prepend link tag to html, minify html | html |\n| javascript, css | minify css, merge style tag into javascript, minify javascript | css, javascript |\n| javascript, css, html | minify css, prepend style tag to html, minify html, merge into javascript, minify javascript | css, html, javascript |\n| javascript, css, html, cssHref | minify css, prepend style tag to html, prepend link tag to html, minify html, merge into javascript, minify javascript | css, html, javascript |\n| javascript, html | minify html, merge into javascript, minify javascript | html, javascript |\n| javascript, html, cssHref | prepend link tag to html, minify html, merge into javascript, minify javascript | html, javascript |\n| javascript, cssHref | add link tag to javascript, minify javascript | javascript |\n\n\u003e By default, html minification minifies any css found therein.\n\n## Usage\n\n```javascript\n  // Sample usage, all options specified\n  import {build} from '@localnerve/web-component-build';\n  const outputDir = 'some/path/output';\n\n  const result = await build(outputDir, {\n    cssPath: '/some/path/file.css',\n    cssLinkHref: '//some/path/file.css',\n    jsPath: '/some/path/file.js',\n    htmlPath: '/some/path/file.html',\n    jsReplacement: '__REPLACEMENT_IN_JS__',\n    terserOptions: { /* terser options */ },\n    htmlminOptions: { /* html-minifier options */ },\n    cleancssOptions: { /* clean-css options */ },\n    minifySkip: false\n  });\n  // html, js, and css written to `outputDir`\n  \n  // Retrieve processed content\n  const [js, css, html] = await Promise.all([\n    result.getJs(), result.getCss(), result.getHtml()\n  ]);\n\n  // Retrieve output paths\n  const [jsPath, cssPath, htmlPath] = [result.jsPath, result.cssPath, result.htmlPath];\n```\n\n## API\nThis library exports a single function that takes an output directory and processing options, returns a [result](#result-object) object.\n```\nbuild (outputDir, options): Result\n```\n\n### outputDir {String}, required\nFull path to the output directory where css, html, and javascript output are written.\n\n### Options {Object}, optional*\n\\* Not really. One or more of `cssPath`, `jsPath`, and/or `htmlPath` **must** be supplied. They have no default, so if no options are supplied, this library throws an exception.  \n\n* **cssPath** {String} - Full path to the input css file  \n  If supplied:  \n    + css will be minified using `cleancssOptions`\n    + css will be wrapped in a `style` tag\n    + css will be inserted into the javascript file if `jsReplacement` and `jsPath` are supplied and no `htmlPath` supplied\n    + css will be prepended to the html file if `htmlPath` is supplied\n  \n* **cssLinkHref** {String} - link href to a stylesheet resource to be referenced by the web component  \n  If supplied:\n    + href will be wrapped in a `link` tag\n    + resulting `link` will be prepended to the html file if `htmlPath` supplied\n    + resulting `link` will be inserted into the javascript file if no `htmlPath` supplied and `jsReplacement` and `jsPath` supplied  \n  \n* **htmlPath** {String} - Full path to the input html file  \n  If supplied:  \n    + css will be prepended in a `style` tag\n    + cssLinkHref will be prepended in a `link` tag\n    + html will be inserted into the javascript file if `jsReplacement` and `jsPath` is supplied  \n  \n* **jsPath** {String} - Full path to the input javascript file\n* **jsReplacement** {String|RegExp} - The replacement pattern for the css or html in the javascript file. See [pattern](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#pattern) for full documentation  \n  If supplied:\n    + A replacement will be attempted in the javascript file, `jsPath` must also be supplied\n    + If **not supplied** or falsy, No replacement will be attempted and all assets are just copied to `outputDir`  \n  \n* **terserOptions** {Object} - The [javascript minifier options](https://github.com/terser/terser/blob/master/README.md#minify-options) object  \n  Defaults:\n  ```\n  {\n    ecma: 2022\n  }\n  ```  \n  \n* **htmlminOptions** {Object} - The [html minifier options](https://github.com/terser/html-minifier-terser?tab=readme-ov-file#options-quick-reference) object  \n  Defaults:  \n  ```\n  {\n    minifyJS: true,\n    minifyCSS: true,\n    collapseWhitespace: true,\n    removeAttributeQuotes: true,\n    removeComments: true\n  }\n  ```  \n  \n* **cleancssOptions** {Object} - The [css minifier options](https://github.com/clean-css/clean-css/blob/master/README.md#constructor-options) object  \n  Defaults (same as `clean-css` defaults)  \n  \n* **minifySkip** {Boolean} - True to skip all minifications, defaults to false  \n\n### Result {Object}\nThe output of the build process. Allows access to the output paths and full output content. Format:  \n  \n  + **cssPath** {String}, The full path to the output css  \n  \n  + **htmlPath** {String}, The full path to the output html  \n  \n  + **jsPath** {String}, The full path to the output javascript  \n  \n  + **getCss** {asyncFunction}, gets the output css  \n  \n  + **getHtml** {asyncFunction}, gets the output html  \n  \n  + **getJs** {asyncFunction}, gets the output javascript  \n  \n## License\n  * [BSD-3 Clasuse, Alex Grant, LocalNerve](LICENSE.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocalnerve%2Fweb-component-build","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flocalnerve%2Fweb-component-build","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocalnerve%2Fweb-component-build/lists"}