{"_id":"@allnulled/vuebundler","name":"@allnulled/vuebundler","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@allnulled/vuebundler","version":"1.0.0","description":"Like simplebundler but using a *.js list file instead of a directory","main":"vuebundler.js","bin":{"vuebundler":"vuebundler.bin.js"},"scripts":{"test":"npx mocha --bail test/test.js"},"keywords":["bundler","html","css","js","vue","no-webpack","simple"],"author":{"name":"allnulled"},"license":"WTFPL","gitHead":"22fb1f3c17b21798b071a5c918a2a9ecdbbf6967","_id":"@allnulled/vuebundler@1.0.0","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-OrnvJJn2W0nwxqjiVmbfx3Kb3Hg6Q7wUeUqKXesxwMtxAfv/EndyvDKce+QW6fG1AA6EdH5RSAlpmD1UVHdDaw==","shasum":"c1a7f6deb909b8838e230b9b8634088d2404a164","tarball":"https://registry.npmjs.org/@allnulled/vuebundler/-/vuebundler-1.0.0.tgz","fileCount":24,"unpackedSize":446543,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9NMjjYri8HN6zAYww9y3mJtku1ub/lvsA/gfYkqwW8AIhAIvOfdg2DsB7qMm2vZ8eflCxr/RM+AOuXm1y5snA7kCB"}]},"_npmUser":{"name":"allnulled","email":"todosanulados@gmail.com"},"directories":{},"maintainers":[{"name":"allnulled","email":"todosanulados@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vuebundler_1.0.0_1734941896303_0.3930040216264894"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-23T08:18:16.213Z","1.0.0":"2024-12-23T08:18:16.482Z","modified":"2024-12-23T08:18:16.771Z"},"maintainers":[{"name":"allnulled","email":"todosanulados@gmail.com"}],"description":"Like simplebundler but using a *.js list file instead of a directory","keywords":["bundler","html","css","js","vue","no-webpack","simple"],"author":{"name":"allnulled"},"license":"WTFPL","readme":"# vuebundler\n\nPack Vue.js (v2) components from CLI or API from a list of files. But no webpack or shit. Simple.\n\nIt can work in other more wide scenarios, because it just bundles all the `.css`, and all the `.js` together, injecting the `.html` files as string through `$template` first match in the `.js`.\n\nBut, you know. No webpack or shit.\n\n## Install\n\n```sh\nnpm i -g @allnulled/vuebundler\n```\n\n## Usage by CLI\n\n```sh\nvuebundler\n  --list bundlelist.js\n  --output dist/components.js\n  --ignore file4.js file7.js file9.js\n  --id MyCoolAPI\n  --module false\n```\n\n## Usage by API\n\n```js\nrequire(__dirname + \"/vuebundler.js\").bundle({\n    list: \"bundlelist.js\",\n    output: \"test/example1/dist/components.js\",\n    module: true,\n    id: \"Lib1\",\n    ignore: [],\n});\n```\n\nWhile in `bundlelist.js` you have to provide something like:\n\n```js\nmodule.exports = [\n  __dirname + \"/test/example1/lib/components/page1/page1\",\n  __dirname + \"/test/example1/lib/components/page1/page2\",\n  __dirname + \"/test/example1/lib/components/page1/page3\",\n];\n```\n\nNote that the `.html`, `.js` and `.css` extensions are omitted, as they MUST be these ones.\n\nSo, for each component we have, with their respective names:\n\n- `page1.html`\n- `page1.js`\n- `page1.css`\n\nEverything is normal, except that in the `.js` you have to provide something like:\n\n```js\nVue.component(\"page-1\", {\n  name: \"page-1\",\n  template: $template,\n  props: {},\n  data() {\n    return {}\n  },\n  methods: {},\n  watch: {},\n  beforeCreate() {},\n  created() {},\n  beforeMount() {},\n  mounted() {},\n  beforeUpdate() {},\n  updated() {},\n  beforeDestroy() {},\n  destroyed() {},\n  activated() {},\n  deactivated() {},\n});\n```\n\nNote that `template` is filled with `$template`. The bundler pipes the text so it replaces the first `$template` match with the `.html` provided.\n\nThat is how the template component is injected in the logical component.\n\nThe bundler will take care to append all the JavaScript in a JavaScript file, and all the CSS in a CSS file.\n\nThe last step is to generate the `output.js` and `output.css`. The bundler uses the `--output` option as for the `.js`, and removes that same extension and appends the `.css` for the `.css`.\n\nThis way, only providing the `.js` name, the `.css` name is overstood.\n\n","readmeFilename":"README.md"}