Merge pull request #7 from devwiz1028/sfc

Use sfc-rollup to support ssr.

Author: devwiz1028

.browserslistrc

@@ -0,0 +1,3 @@
+current node
+last 2 versions and > 2%
+ie > 10

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+npm-debug.log
+yarn-error.log
+*.map
+.vscode

.npmignore

@@ -0,0 +1,4 @@
+build
+dev
+node_modules
+babel.config.js

README.md

@@ -16,22 +16,40 @@ yarn add vue-onoff-toggle
 ```
 
 
-## How to use
+## Import in Vue.js
+In your `main.js` file:
+
 ```javascript
+import Vue from 'vue'
 import OnoffToggle from 'vue-onoff-toggle'
 
-new Vue({
-  components: {
-    OnoffToggle
-  },
-  data() {
-    return {
-      checked: false
-    }
-  }
-})
+Vue.use(OnoffToggle)
 ```
 
+## Import in Nuxt.js
+Create a new plugin in `plugins/vue-onoff-toggle.js`:
+
+```javascript
+import Vue from 'vue'
+import OnoffToggle from 'vue-onoff-toggle'
+
+Vue.use(OnoffToggle)
+```
+
+Add this new plugin to `nuxt.config.js`
+
+```javascript
+module.exports = {
+  // ...
+  plugins: [
+    // ...
+    '~plugins/vue-onoff-toggle'
+  ]
+}
+```
+
+## How to use
+After import, use `onoff-toggle` tag inside your vue template:
 ```html
 <onoff-toggle v-model="checked" />
 

babel.config.js

@@ -0,0 +1,5 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = ['@babel/preset-env'];
+module.exports = {
+  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+};

build/rollup.config.js

@@ -0,0 +1,159 @@
+// rollup.config.js
+import fs from 'fs';
+import path from 'path';
+import vue from 'rollup-plugin-vue';
+import alias from '@rollup/plugin-alias';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import babel from 'rollup-plugin-babel';
+import { terser } from 'rollup-plugin-terser';
+import minimist from 'minimist';
+
+// Get browserslist config and remove ie from es build targets
+const esbrowserslist = fs.readFileSync('./.browserslistrc')
+  .toString()
+  .split('\n')
+  .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
+
+const argv = minimist(process.argv.slice(2));
+
+const projectRoot = path.resolve(__dirname, '..');
+
+const baseConfig = {
+  input: 'src/entry.js',
+  plugins: {
+    preVue: [
+      alias({
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+        entries: {
+          '@': path.resolve(projectRoot, 'src'),
+        },
+      }),
+    ],
+    replace: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.ES_BUILD': JSON.stringify('false'),
+    },
+    vue: {
+      css: true,
+      template: {
+        isProduction: true,
+      },
+    },
+    babel: {
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+    },
+  },
+};
+
+// ESM/UMD/IIFE shared settings: externals
+// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
+const external = [
+  // list external dependencies, exactly the way it is written in the import statement.
+  // eg. 'jquery'
+  'vue',
+];
+
+// UMD/IIFE shared settings: output.globals
+// Refer to https://rollupjs.org/guide/en#output-globals for details
+const globals = {
+  // Provide global variable names to replace your external imports
+  // eg. jquery: '$'
+  vue: 'Vue',
+};
+
+// Customize configs for individual targets
+const buildFormats = [];
+if (!argv.format || argv.format === 'es') {
+  const esConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      file: 'dist/vue-onoff-toggle.esm.js',
+      format: 'esm',
+      exports: 'named',
+    },
+    plugins: [
+      replace({
+        ...baseConfig.plugins.replace,
+        'process.env.ES_BUILD': JSON.stringify('true'),
+      }),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      babel({
+        ...baseConfig.plugins.babel,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: esbrowserslist,
+            },
+          ],
+        ],
+      }),
+      commonjs(),
+    ],
+  };
+  buildFormats.push(esConfig);
+}
+
+if (!argv.format || argv.format === 'cjs') {
+  const umdConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vue-onoff-toggle.ssr.js',
+      format: 'cjs',
+      name: 'VueOnoffToggle',
+      exports: 'named',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue({
+        ...baseConfig.plugins.vue,
+        template: {
+          ...baseConfig.plugins.vue.template,
+          optimizeSSR: true,
+        },
+      }),
+      babel(baseConfig.plugins.babel),
+      commonjs(),
+    ],
+  };
+  buildFormats.push(umdConfig);
+}
+
+if (!argv.format || argv.format === 'iife') {
+  const unpkgConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vue-onoff-toggle.min.js',
+      format: 'iife',
+      name: 'VueOnoffToggle',
+      exports: 'named',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      babel(baseConfig.plugins.babel),
+      commonjs(),
+      terser({
+        output: {
+          ecma: 5,
+        },
+      }),
+    ],
+  };
+  buildFormats.push(unpkgConfig);
+}
+
+// Export config
+export default buildFormats;

dev/serve.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import Dev from './serve.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: (h) => h(Dev),
+}).$mount('#app');

dev/serve.vue

@@ -0,0 +1,21 @@
+<script>
+import Vue from 'vue';
+import { OnoffToggle } from '@/entry';
+
+export default Vue.extend({
+  name: 'ServeDev',
+  components: {
+    OnoffToggle,
+  }
+});
+</script>
+
+<template>
+  <div id="app">
+    <onoff-toggle
+      style="margin-right: 40px"
+      onColor="#033753"
+      :value="true"
+    />
+  </div>
+</template>