{"_id":"@brezel/vue-inbrowser-compiler","_rev":"3-f75bec33b8c31b65e5a775ba97f9b13d","name":"@brezel/vue-inbrowser-compiler","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"@brezel/vue-inbrowser-compiler","version":"1.0.1","keywords":["vue","compile","live","browser"],"author":{"name":"Bart Ledoux","email":"ledouxb@me.com"},"license":"MIT","_id":"@brezel/vue-inbrowser-compiler@1.0.1","maintainers":[{"name":"brezeldev","email":"dev@brezel.io"}],"contributors":[{"name":"Oliver Wichmann","email":"ow@ki-bro.com"}],"dist":{"shasum":"8986687a15592735d7267c2b27c8241c9e3a22e5","tarball":"https://registry.npmjs.org/@brezel/vue-inbrowser-compiler/-/vue-inbrowser-compiler-1.0.1.tgz","fileCount":2,"integrity":"sha512-UdH9R2qR/C3UteHLf5bL9UopJ+QD3A8PAgyaoP768y2pE509GacCpT43kDiFIYN7+HpDMKI2cg28mu4uSjev5g==","signatures":[{"sig":"MEUCIDpVmXnHSMq7xf+yMc/2jyYbEMrtpmn2FdXTxifWjEFXAiEAleZVHgk0nDSIq8G0O9TlF/1fCX7kMEJICeurHtklBjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5309},"main":"lib/vue-inbrowser-compiler.cjs.js","type":"module","types":"lib/types/index.d.ts","module":"lib/vue-inbrowser-compiler.esm.js","gitHead":"a7106249b8e48926c5859de5b7dbfdcc7a9b7ad6","scripts":{"compile":"rollup -c","compile:watch":"rollup -c --watch"},"_npmUser":{"name":"brezeldev","email":"dev@brezel.io"},"repository":{"url":"gitlab.kiwis-and-brownies.de:kibro/vue-inbrowser-compiler.git","type":"git"},"_npmVersion":"10.4.0","description":"compile vue single file components right in your browser","directories":{},"_nodeVersion":"20.11.1","dependencies":{"acorn":"^8.11.3","walkes":"^0.2.1","acorn-jsx":"^5.3.2","camelcase":"^8.0.0","vue-inbrowser-compiler-utils":"^4.72.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.7.14","tslib":"2.6.2","rollup":"4.12.0","typescript":"5.3.3","@vue/test-utils":"1.3.4","semantic-release":"^22.0.8","@vue/compiler-sfc":"3","@semantic-release/git":"^10.0.1","vue-template-compiler":"2.7.14","@rollup/plugin-commonjs":"25.0.7","@semantic-release/gitlab":"^12.1.1","@rollup/plugin-typescript":"11.1.6","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"vue":">=2"},"_npmOperationalInternal":{"tmp":"tmp/vue-inbrowser-compiler_1.0.1_1708463830296_0.9761320026093876","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@brezel/vue-inbrowser-compiler","version":"1.0.2","keywords":["vue","compile","live","browser"],"author":{"name":"Bart Ledoux","email":"ledouxb@me.com"},"license":"MIT","_id":"@brezel/vue-inbrowser-compiler@1.0.2","maintainers":[{"name":"brezeldev","email":"dev@brezel.io"}],"contributors":[{"name":"Oliver Wichmann","email":"ow@ki-bro.com"}],"dist":{"shasum":"631ab51da23e7b514dd65aa01d51f863f3985c20","tarball":"https://registry.npmjs.org/@brezel/vue-inbrowser-compiler/-/vue-inbrowser-compiler-1.0.2.tgz","fileCount":2,"integrity":"sha512-IEmhX+u+TUn+vIfbYLf6lFQbpTDfqiGinvtkI1iuECzHRB62ZAJe/YyLVhcjyZSbGSEqhNOrzSdqkbY91z3R5Q==","signatures":[{"sig":"MEQCIBdCxLI4myJ5j7WjTkuBhv1bNdbPOt/6SbVIgXvMHtaEAiAK0ufrmyFQdqsGHh1QxvhwMecJM4tGiucCkGbCeh8z8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5311},"main":"lib/vue-inbrowser-compiler.cjs.js","type":"module","types":"lib/types/index.d.ts","module":"lib/vue-inbrowser-compiler.esm.js","gitHead":"4ccb7d6eac798fb687264546916d09292715604f","scripts":{"compile":"rollup -c","compile:watch":"rollup -c --watch"},"_npmUser":{"name":"brezeldev","email":"dev@brezel.io"},"repository":{"url":"gitlab.kiwis-and-brownies.de:kibro/vue-inbrowser-compiler.git","type":"git"},"_npmVersion":"10.4.0","description":"compile vue single file components right in your browser","directories":{},"_nodeVersion":"20.11.1","dependencies":{"acorn":"^8.11.3","walkes":"^0.2.1","acorn-jsx":"^5.3.2","camelcase":"^8.0.0","vue-inbrowser-compiler-utils":"^4.72.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.7.14","tslib":"2.6.2","rollup":"4.12.0","typescript":"5.3.3","@vue/test-utils":"1.3.4","semantic-release":"^22.0.8","@vue/compiler-sfc":"3","@semantic-release/git":"^10.0.1","vue-template-compiler":"2.7.14","@rollup/plugin-commonjs":"25.0.7","@semantic-release/gitlab":"^12.1.1","@rollup/plugin-typescript":"11.1.6","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"vue":">=2"},"_npmOperationalInternal":{"tmp":"tmp/vue-inbrowser-compiler_1.0.2_1708464039001_0.3267762911818246","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@brezel/vue-inbrowser-compiler","version":"1.0.3","keywords":["vue","compile","live","browser"],"author":{"name":"Bart Ledoux","email":"ledouxb@me.com"},"license":"MIT","_id":"@brezel/vue-inbrowser-compiler@1.0.3","maintainers":[{"name":"brezeldev","email":"dev@brezel.io"}],"contributors":[{"name":"Oliver Wichmann","email":"ow@ki-bro.com"}],"dist":{"shasum":"38f2be26a4b1a923ff8692b91c74542a389d53b6","tarball":"https://registry.npmjs.org/@brezel/vue-inbrowser-compiler/-/vue-inbrowser-compiler-1.0.3.tgz","fileCount":9,"integrity":"sha512-qqks4YZ6sWtoKxG59Z4aN7WJb0ecb772FaqcbYELAgVHP9qL8IXnXBiXOm08Ss8Wew9atC9TfYDIObShUlTw0g==","signatures":[{"sig":"MEYCIQDP41enpJpK6QLl+SAoPyuBixcRhR1VaHK1OzGzSrOOLgIhAMvmZYobJvvt5vnE1QRh3RaHfRzEi/3PBZd9FgHIYhZZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37266},"main":"lib/vue-inbrowser-compiler.cjs.js","type":"module","types":"lib/types/index.d.ts","module":"lib/vue-inbrowser-compiler.esm.js","gitHead":"bf5f5294a0f98bc9b529628fa377cdf81da1362b","scripts":{"compile":"rollup -c","compile:watch":"rollup -c --watch"},"_npmUser":{"name":"brezeldev","email":"dev@brezel.io"},"repository":{"url":"gitlab.kiwis-and-brownies.de:kibro/vue-inbrowser-compiler.git","type":"git"},"_npmVersion":"10.4.0","description":"compile vue single file components right in your browser","directories":{},"_nodeVersion":"20.11.1","dependencies":{"acorn":"^8.11.3","walkes":"^0.2.1","acorn-jsx":"^5.3.2","camelcase":"^8.0.0","vue-inbrowser-compiler-utils":"^4.72.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"2.7.14","tslib":"2.6.2","rollup":"4.12.0","typescript":"5.3.3","@vue/test-utils":"1.3.4","semantic-release":"^22.0.8","@vue/compiler-sfc":"3","@semantic-release/git":"^10.0.1","vue-template-compiler":"2.7.14","@rollup/plugin-commonjs":"25.0.7","@semantic-release/gitlab":"^12.1.1","@rollup/plugin-typescript":"11.1.6","@rollup/plugin-node-resolve":"15.2.3"},"peerDependencies":{"vue":">=2"},"_npmOperationalInternal":{"tmp":"tmp/vue-inbrowser-compiler_1.0.3_1708464361630_0.46212788639346525","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-02-20T21:17:10.215Z","modified":"2024-08-20T10:35:06.898Z","1.0.1":"2024-02-20T21:17:10.435Z","1.0.2":"2024-02-20T21:20:39.173Z","1.0.3":"2024-02-20T21:26:01.840Z"},"author":{"name":"Bart Ledoux","email":"ledouxb@me.com"},"license":"MIT","keywords":["vue","compile","live","browser"],"repository":{"url":"gitlab.kiwis-and-brownies.de:kibro/vue-inbrowser-compiler.git","type":"git"},"description":"compile vue single file components right in your browser","contributors":[{"name":"Oliver Wichmann","email":"ow@ki-bro.com"}],"maintainers":[{"email":"oliverwichmann@outlook.de","name":"oliver.wich"},{"email":"dev@brezel.io","name":"brezeldev"}],"readme":"> Forked / extracted from [vue-styleguidist/vue-styleguidist](https://github.com/vue-styleguidist/vue-styleguidist)\n\n# vue-inbrowser-compiler\n\nCompile vue components code into vue components objects inside of your browser\n\n## install\n\n```bash\nyarn add vue-inbrowser-compiler\n```\n\n## usage\n\nThis library is meant to help write components for vue that can be edited through text.\n\n### compile\n\nCompiles a string of pseudo javascript code written in es2015. It returns the body of a function as a string. Once you execute the function, it will return a VueJS component.\n\n**prototype**: `compile(code: string, config: BubleConfig): {script: string, style: string}`\n\n```js\nimport { compile } from 'vue-inbrowser-compiler'\n\n/**\n * render a component\n */\nfunction getComponent(code) {\n  const conpiledCode = compile(\n    code,\n    // pass in config options to buble to set up the output\n    {\n      target: { ie: 11 }\n    }\n  )\n  const func = new Function(conpiledCode.script)\n  return func()\n}\n```\n\nThe formats of the code here are the same as vue-live and vue-styleguidist\n\n#### pseudo jsx\n\nMost common use case is a simple vue template.\n\n```html\n<button color=\"blue\">Test This Buttton</button>\n```\n\nwill be transformed into\n\n```js\nreturn {\n  template: '<Button color=\"blue\">Test This Buttton</Button>'\n}\n```\n\nA more advanced use case if you want to use variables\n\n```jsx\n// initialize variables here and use them below\nlet show = true\nlet today = new Date();\n\n// starting from the first line that starts with a <tag>,\n// the rest is considered a template\n<input type=\"checkbox\" v-model=\"show\">\n<date-picker\n  style=\"text-align:center;\"\n  v-if=\"show\"\n  :value=\"today\"/>\n```\n\nwill turn into\n\n```js\nlet show = true\nlet today = new Date();\n\nreturn {\n    data(){\n        return{\n            show: show,\n            today: today\n        }\n    }\n    template: `<input type=\"checkbox\" v-model=\"show\">\n<date-picker\n  style=\"text-align:center;\"\n  v-if=\"show\"\n  :value=\"today\"/>`\n}\n```\n\n#### Vue apps\n\nA simple way to make it explicit\n\n```js\nnew Vue({\n  template: `\n<div>\n  <input v-model=\"value\" type=\"checkbox\">\n  <h1 v-if=\"value\">I am checked</h1>\n</div>`,\n  data() {\n    return {\n      value: false\n    }\n  }\n})\n```\n\n#### Single File Components\n\n```html\n<template>\n  <div class=\"hello\">\n    <h1>Colored Text</h1>\n    <button>{{ msg }}</button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        msg: 'Push Me'\n      }\n    }\n  }\n</script>\n\n<style>\n  .hello {\n    text-align: center;\n    color: #900;\n  }\n</style>\n```\n\n### isCodeVueSfc\n\nDetects if the code given corresponds to a VueJS [Single File Component](https://vuejs.org/v2/guide/single-file-components.html). If there is a `<template>` or a `<script>` tag, it will return true, otherwise return false.\n\n**prototype**: `isCodeVueSfc(code: string):boolean`\n\n```js\nimport { isCodeVueSfc } from 'vue-inbrowser-compiler'\n\nif (isCodeVueSfc(code)) {\n  doStuffForSFC(code)\n} else {\n  doStuffForJSFiles(code)\n}\n```\n\n### addScopedStyle\n\nTakes the css style passed in first argument, scopes it using the suffix and adds it to the current page.\n\n**prototype**: `addScopedStyle(css: string, suffix: string):void`\n\n### adaptCreateElement\n\nIn order to make JSX work with the compiler, you need to specify a pragma. Since tis pragma has a different form for VueJs than for ReactJs, we need to provide an adapter.\n\n```js\nimport { compile, adaptCreateElement } from 'vue-inbrowser-compiler'\n\n/**\n * render a JSX component\n */\nfunction getComponent(code) {\n  const conpiledCode = compile(\n    code,\n    // in this config we set up the jsx pragma to a higher order function\n    {\n      jsx: '__pragma__(h)'\n    }\n  )\n  const func = new Function('__pragma__', conpiledCode.script)\n  // now pass the higher order function to the function call\n  return func(adaptCreateElement)\n}\n```\n","readmeFilename":"README.md"}