incuca / vue-standalone-component

Vuejs template to build components with livecoding, tests, documentation and demos

vue-standalone-component

Vuejs standalone component template using karma for testing

DEPRECATED: USE P11N INSTEAD

Build your standalone components using this tiny template.

This template is Vue 2.x only.

Usage

This is a project template for vue-cli.

$ npm install -g vue-cli
$ vue init InCuca/vue-standalone-component my-component
$ cd my-component
$ npm install
$ npm run serve

The generated output in ./dist can be used with node and the browser.

PS: to build to UMD run npm run build:umd

What's Included

• Karma for testing
• Demo and documentation page from vue-styleguidist
• Release it! support
• Babel and ESLint

Linting

$ npm run lint

Testing & Test Coverage

$ npm run test
$ npm run test:watch
$ npm run test:cov

Building

ES6 Modules / CommonJS

$ npm run build

import myCmp from 'dist/my-cmp';

Vue.component('my-cmp', myCmp);

UMD

$ npm run build:umd

<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script src="./dist/my-cmp.min.js" charset="utf-8"></script>

<div id="app"></div>

<script type="text/javascript">
  Vue.component('my-cmp', window.MyCmp.default);
  new Vue({
    el: '#app',
    template: '<my-cmp text="Hello World!"></my-cmp>',
  });
</script>

vue-standalone-component's Issues

Add vuex support

Cannot build on Windows

I've just created a project with vue-cli, installed the dependencies and ran the build npm script.

It won't build on Windows 10, with the following log:

poi build --format cjs --dist dist; poi build --format umd --dist dist/umd
> Running in production mode
> Using external Poi config file
> location: "C:\DEV\web\socomodule\poi.config.js"
> Bundling with Webpack 3.12.0
> Creating an optimized production build:

> Using external babel configuration
> location: "C:\DEV\web\socomodule\.babelrc"

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string
    at assertPath (path.js:39:11)
    at Object.resolve (path.js:168:7)
    at module.exports (C:\DEV\web\socomodule\node_modules\poi\lib\create-config.js:106:16)
    at Poi.createWebpackConfig (C:\DEV\web\socomodule\node_modules\poi\lib\index.js:76:26)
    at Promise (C:\DEV\web\socomodule\node_modules\poi\lib\index.js:187:34)
    at new Promise (<anonymous>)
    at Poi.runMiddlewares (C:\DEV\web\socomodule\node_modules\poi\lib\index.js:186:12)
    at prepare.then (C:\DEV\web\socomodule\node_modules\poi\lib\index.js:89:24)
    at <anonymous>

The repo builds just fine on CircleCI though.

Error: No parser and no file path given, couldn't infer a parser.

to solve this you need to:

npm install --save-dev [email protected]

Seems that 1.13 version has some problems...

Installation completes with some warnings

Hello.

I've been able to spot some warnings when running npm install on the created folder.

npm WARN deprecated [email protected]: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/
npm WARN deprecated [email protected]: This project is unmaintained
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated [email protected]: stop using this version
npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: This project is unmaintained
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0

> [email protected] install ~/project/node_modules/fsevents
> node install

[fsevents] Success: "~/project/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> [email protected] install ~/project/node_modules/uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0


> [email protected] install ~/project/node_modules/phantomjs-prebuilt
> node install.js

PhantomJS not found on PATH
Download already available at /var/folders/v0/n07bhl0j7_n91rpy0cfy2ghc0000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
Verified checksum of previously downloaded file
Extracting zip contents
Removing ~/project/node_modules/phantomjs-prebuilt/lib/phantom
Copying extracted folder /var/folders/v0/n07bhl0j7_n91rpy0cfy2ghc0000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1529681789478/phantomjs-2.1.1-macosx -> ~/project/node_modules/phantomjs-prebuilt/lib/phantom
Writing location.js file
Done. Phantomjs binary available at ~/project/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs

> [email protected] postinstall ~/project/node_modules/jss
> node -e "console.log('\u001b[35m\u001b[1mLove JSS? You can now support us on open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/jss/donate\u001b[0m')"

Love JSS? You can now support us on open collective:
 > https://opencollective.com/jss/donate

> [email protected] postinstall ~/project/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js


> [email protected] postinstall ~/project/node_modules/poi
> node -e "console.log('\u001b[35m\u001b[1mLove Poi? You can now donate to support the author:\u001b[22m\u001b[39m\n> \u001b[34mhttps://patreon.com/egoist\u001b[0m')"

Love Poi? You can now donate to support the author:
> https://patreon.com/egoist
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of vue-loader@>=14.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN The package vue is included as both a dev and production dependency.

added 1734 packages from 2928 contributors in 69.301s
[!] 6 vulnerabilities found [27613 packages audited]
    Severity: 1 low | 5 moderate
    Run `npm audit` for more detail

Running npm audit shows me some vulnerable installed packages.

poi build to UMD doesnt minify the CSS properly

When we create a new component and add any inline styles to the file, the minified css file after a build seems to be missing a trailing semi-colon after each selector.

E.g. this is the sample my-component

<template lang="html">
  <strong>{{ text }}</strong>
</template>

<script>
/**
 * Component documentation
 */
export default {
  name: 'my-component',
  props: {
    /**
     * The component text
     */
    text: {
      type: String,
      default: '',
      required: true
    },
  },
}
</script>

<style lang="css" scoped>
  .test {
    color: red;
  }
</style>

run npm run build

goto the dist\umd\my-component.min.css file

You get the following output (notice no semi colon after red)

.test[data-v-4d6c94b0]{color:red} /*# sourceMappingURL=my-component.min.css.map*/

This is on windows platform.

This is not a problem with this template or project but something to note in the poi component. I havent been able to trace the root cause yet, but would be good if anyone has any suggestions

rename error

...
vue-cli · Generated "my-component".
vue-cli · To get started:

fs.js:772
return binding.rename(pathModule._makeLong(oldPath),
^

Error: ENOENT: no such file or directory, rename 'src/Component/Component.vue' -> 'src/Component/my-component.vue'
at Object.fs.renameSync (fs.js:772:18)

Test in browser

Hello,

I can't see how you can integrate the standalone component in the browser.
Could you give an example ?

I used to use vue build --prod --lib which does not work anymore

Regards

Is there a way to add external plugins?

I would like to use external libraries such as jQuery oder underscore.js inside my components, but without compiling them into the resulting component module.

Webpack offers the externals directive for this. (see https://webpack.js.org/configuration/externals/)
I tried to add it into poi.config.js or styleguide.config.js, but I was not successful. (I was following this https://poi.js.org/#/home?id=webpack)

Do you have an idea, how it could be achieved? I think it will be of great use for many people.

Missing example on passing props

Hello,

I was checking your documentation to see if your project may be a good fit for me.

However, I was not able to find any example regarding props passing to component in UMD.

Can you provide any?

Thanks

Support for poi v10

Looks like we are using poi v9, whereas poi master is currently at v10.

I want to make a PR to poi repo (in particular the karma plugin), for the purpose of enabling remote debugging on the karma test watcher. Would be good to get this project upgraded to the latest whilst at it.

Any thoughts or work planned?

Template or render function not defined

I have exported my standalone component socomodule and published it on npm.

When I try to use it in another Vue application, I get an error:

<template>
  <div>
    ...
    <socomodule></socomodule>
    ...
  </div>
</template>

<script>
import Vue from 'vue'
import socomodule from 'socomodule'

Vue.component('socomodule', socomodule)

export default {
  name: 'my-component'
}
</script>

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Socomodule>

If you want to try, npm i socomodule

Here's the (truncated) package.json of the published module:

{
  "name": "socomodule",
  "main": "socomodule.min.js",
  "dependencies": {
    "vue": "^2.5.3"
  }
}

I published the cjs folder (containing .min.js, .min.js.map, .min.css, .min.css.map).

---

Same problem with the UMD:

<html>
<head>
<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script src="socomodule.min.js" charset="utf-8"></script>
</head>

<body>
<div id="app"><socomodule></socomodule></div>
<script type="text/javascript">
  Vue.component('socomodule', window.Socomodule);
  new Vue({ el: '#app' })
</script>
</body>
</html> 

gets the same error:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Socomodule>

If you want to try, get our release at https://github.com/socialement-competents/socomodule/releases/tag/v1.1.1

Add vue-router support