{"id":20936833,"url":"https://github.com/aruntk/wc-loader","last_synced_at":"2025-05-13T21:31:12.811Z","repository":{"id":57397166,"uuid":"77438731","full_name":"aruntk/wc-loader","owner":"aruntk","description":":toilet: Webcomponents webpack loader.","archived":false,"fork":false,"pushed_at":"2017-08-09T23:11:41.000Z","size":261,"stargazers_count":99,"open_issues_count":7,"forks_count":15,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-03T20:35:20.618Z","etag":null,"topics":["polymer","wc-loader","webcomponents","webcomponents-webpack-loader","webpack"],"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/aruntk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-27T08:23:14.000Z","updated_at":"2024-06-20T01:59:48.000Z","dependencies_parsed_at":"2022-09-07T11:51:17.830Z","dependency_job_id":null,"html_url":"https://github.com/aruntk/wc-loader","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fwc-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fwc-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fwc-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fwc-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aruntk","download_url":"https://codeload.github.com/aruntk/wc-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254030951,"owners_count":22002677,"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":["polymer","wc-loader","webcomponents","webcomponents-webpack-loader","webpack"],"created_at":"2024-11-18T22:27:29.709Z","updated_at":"2025-05-13T21:31:12.713Z","avatar_url":"https://github.com/aruntk.png","language":"JavaScript","funding_links":[],"categories":["Tools"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e \n  \u003ca href=\"https://www.polymer-project.org\"\u003e\n    \u003cimg width=\"200\" height=\"140\" vspace=\"30\"\n    src=\"https://www.polymer-project.org/images/logos/p-logo.png\"\u003e\n  \u003c/a\u003e\n    \u003ca href=\"http://webcomponents.org/\"\u003e\n    \u003cimg width=\"200\" height=\"200\"\n      src=\"https://raw.githubusercontent.com/webcomponents/webcomponents-icons/master/logo/logo_512x512.png\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" vspace=\"\" hspace=\"25\"\n      src=\"https://worldvectorlogo.com/logos/webpack.svg\"\u003e\n  \u003c/a\u003e\n  \u003ch1\u003eWC Loader\u003c/h1\u003e\n  \u003cp\u003eWebcomponents webpack loader . Supports hot code reload. 🚽 😜\u003cp\u003e\n   \u003ca href=\"https://www.npmjs.com/package/wc-loader\"\u003e\n    \u003cimg\n      src=\"https://img.shields.io/npm/v/wc-loader.svg\" height=\"20\"\u003e\n  \u003c/a\u003e\n     \u003ca href=\"https://www.npmjs.com/package/wc-loader\"\u003e\n    \u003cimg\n      src=\"https://img.shields.io/npm/dt/wc-loader.svg\" height=\"20\"\u003e\n  \u003c/a\u003e\n     \u003ca href=\"https://gitter.im/aruntk/polymer?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge\"\u003e\n    \u003cimg\n      src=\"https://badges.gitter.im/aruntk/polymer.svg\" height=\"20\"\u003e\n  \u003c/a\u003e\n\u003cp\u003e DEMO - \u003ca href=\"https://github.com/aruntk/polymer-webpack-demo\"\u003ehttps://github.com/aruntk/polymer-webpack-demo\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e Polymer Webpack Apollo-Graphql Demo - \u003ca href=\"https://github.com/aruntk/githunt-polymer\"\u003ehttps://github.com/aruntk/githunt-polymer\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\n\u003ch2 align=\"center\"\u003eAbout\u003c/h2\u003e\n\nwc-loader helps you use webcomponents (polymer, x-tags etc also) with webpack.\n\n### Under the hood\n\nwc-loader uses [parse5](https://github.com/inikulin/parse5) which parses HTML the way the latest version of your browser does. \nDoes not use any regex to parse html. :)\n\n##### Main functions\n\n1. Handles html link imports. **With Hot Code Reload Support**\n2. Handles external script files (script src). **With Hot Code Reload Support**\n3. Handles external css files (link rel stylesheet)\n4. Handles template tags.\n5. Removes comments and unecessary whitespaces.\n5. Handles loading order of html and js inside the polymer files\n4. Adds components to document during runtime.\n\n\u003ch2 align=\"center\"\u003eInstallation\u003c/h2\u003e\n\n```sh\nnpm i -D wc-loader\n```\n\n\u003ch2 align=\"center\"\u003eUsage\u003c/h2\u003e\n\n```js\nmodule: {\n    rules: [\n      {\n        test: /\\.js$/, // handles js files. \u003cscript src=\"path.js\"\u003e\u003c/script\u003e and import 'path';\n        use: [{\n          loader: 'babel-loader',\n        }],\n        exclude: /node_modules/\n      },\n      {\n        test: /\\.(png|jpg|gif|svg)$/, // handles assets. eg \u003cimg src=\"path.png\"\u003e\n        use: [{\n          loader: 'file-loader',\n          options: {\n            name: '[name].[ext]?[hash]'\n          }\n        }]\n      },\n      {\n        test: /\\.html$/, // handles html files. \u003clink rel=\"import\" href=\"path.html\"\u003e and import 'path.html';\n        use: [\n          // if you not using es6 inside html remove babel-loader\n          {\n\n            loader: 'babel-loader',\n            // similarly you can use coffee, typescript etc.\n          },\n          {\n            loader: 'wc-loader',\n            options: {\n              minify: true,\n            },\n          }]\n      },\n    ],\n  ]\n}\n```\n\n\n### Using es6, typescript, coffee etc inside html\n\nIn the following config\n\n```js\n{\n  test: /\\.html$/,\n  use: [\n    {\n      loader: 'babel-loader', // change this line\n    },\n    {\n      loader: 'wc-loader',\n      options: {\n        minify: true,\n      },\n    }]\n},\n```\nif you are using es6 inside html use\n```js\nloader: 'babel-loader'\n```\nsimilarly you can use coffee, typescript etc. pipe wc result through the respective loader.\n```js\nloader: 'ts-loader'\n```\n```js\nloader: 'coffee-loader'\n```\n\n### Options\n\nYou can either specify options as part of the loader string or as options property\n\n```js\n{\n  loader: 'wc-loader',\n  options: {\n    minify: true\n  }\n}\n```\n\n#### 'Root-relative' URLs\n\nFor urls that start with a `/`, the default behavior is to not translate them. You'll get a file not found error in the browser. (/path = example.com/path for the browser)\nIf a `root` query parameter is set, however, it will be prepended to the url\nand then translated.\n\n``` html\n\u003c!-- file.html --\u003e\n\u003cimg src=\"/image.jpg\"\u003e\n```\n```js\n// webpack config. options.root can also be used\n\nloader: 'wc-loader?root=/absolue/path/to/root/folder'\n\n// or\n\nloader: 'wc-loader?root=' + path.resolve('relative/path/to/root/folder')\n\n// example\n\nloader: 'wc-loader?root=/'\n\n```\n\n#### Minify html\n\n```js\nloader: 'wc-loader?minify=true'\n```\ndefault options are\n```js\nconst defaultMinifierOptions = {\n  collapseWhitespace: true,\n  customAttrAssign: [/\\$=/],\n  ignoreCustomFragments: [/style\\$?=\"\\[\\[.*?\\]\\]\"/],\n}\n```  \nUse custom options - by config setting `minifierOptions`\n\nRefer https://github.com/kangax/html-minifier for more info\n\n```js\noptions: {\n   minify: true,\n   minifierOptions: {\n     // custom options\n   }\n}\n```\n\n### Like it?\n\n:star: this repo\n\n\n\n### Found a bug?\n\nRaise an issue!\n\n\n### License\n\nMIT. Check [licence](licence) file.\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faruntk%2Fwc-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faruntk%2Fwc-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faruntk%2Fwc-loader/lists"}