Skip to content

Commit 54c1333

Browse files
mvemve
committed
Added vue-toggle-component build using vue-sfc-rollup
1 parent 6ae94dc commit 54c1333

File tree

16 files changed

+17365
-7899
lines changed

16 files changed

+17365
-7899
lines changed

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
{
22
"name": "vue-toggle-component",
33
"version": "1.0.6",
4-
"main" : "dist/vue-toggle-component.common.js",
5-
"files": ["dist/*"],
4+
"main": "dist/vue-toggle-component.common.js",
5+
"files": [
6+
"dist/*"
7+
],
68
"scripts": {
79
"serve": "vue-cli-service serve",
810
"build": "vue-cli-service build",
@@ -12,7 +14,8 @@
1214
"dependencies": {
1315
"sass": "^1.32.11",
1416
"sass-loader": "^10.1.1",
15-
"vue": "^3.0.11"
17+
"vue": "^3.0.11",
18+
"vue-sfc-rollup": "^4.0.5"
1619
},
1720
"devDependencies": {
1821
"@vue/cli-plugin-babel": "^4.5.12",

‎src/App.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import VueToggle from "./components/VueToggle";
77
88
export default {
99
name: 'App',
10-
components: {VueToggle}
10+
components: {
11+
VueToggle
12+
}
1113
}
1214
1315
</script>

‎vue-toggle-component/.browserslistrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
current node
2+
last 2 versions and > 2%
3+
ie > 10

‎vue-toggle-component/babel.config.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const devPresets = ['@vue/babel-preset-app'];
2+
const buildPresets = [
3+
[
4+
'@babel/preset-env',
5+
// Config for @babel/preset-env
6+
{
7+
// Example: Always transpile optional chaining/nullish coalescing
8+
// include: [
9+
// /(optional-chaining|nullish-coalescing)/
10+
// ],
11+
},
12+
],
13+
];
14+
module.exports = {
15+
presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
16+
};

‎vue-toggle-component/build/rollup.config.js‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
// rollup.config.js
2+
import fs from 'fs';
3+
import path from 'path';
4+
import vue from 'rollup-plugin-vue';
5+
import alias from '@rollup/plugin-alias';
6+
import commonjs from '@rollup/plugin-commonjs';
7+
import resolve from '@rollup/plugin-node-resolve';
8+
import replace from '@rollup/plugin-replace';
9+
import babel from '@rollup/plugin-babel';
10+
import PostCSS from 'rollup-plugin-postcss';
11+
import { terser } from 'rollup-plugin-terser';
12+
import minimist from 'minimist';
13+
14+
// Get browserslist config and remove ie from es build targets
15+
const esbrowserslist = fs.readFileSync('./.browserslistrc')
16+
.toString()
17+
.split('\n')
18+
.filter((entry) => entry && entry.substring(0, 2) !== 'ie');
19+
20+
// Extract babel preset-env config, to combine with esbrowserslist
21+
const babelPresetEnvConfig = require('../babel.config')
22+
.presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
23+
24+
const argv = minimist(process.argv.slice(2));
25+
26+
const projectRoot = path.resolve(__dirname, '..');
27+
28+
const baseConfig = {
29+
input: 'src/entry.js',
30+
plugins: {
31+
preVue: [
32+
alias({
33+
entries: [
34+
{
35+
find: '@',
36+
replacement: `${path.resolve(projectRoot, 'src')}`,
37+
},
38+
],
39+
}),
40+
],
41+
replace: {
42+
'process.env.NODE_ENV': JSON.stringify('production'),
43+
},
44+
vue: {
45+
},
46+
postVue: [
47+
resolve({
48+
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
49+
}),
50+
// Process only `<style module>` blocks.
51+
PostCSS({
52+
modules: {
53+
generateScopedName: '[local]___[hash:base64:5]',
54+
},
55+
include: /&module=.*\.css$/,
56+
}),
57+
// Process all `<style>` blocks except `<style module>`.
58+
PostCSS({ include: /(?<!&module=.*)\.css$/ }),
59+
commonjs(),
60+
],
61+
babel: {
62+
exclude: 'node_modules/**',
63+
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
64+
babelHelpers: 'bundled',
65+
},
66+
},
67+
};
68+
69+
// ESM/UMD/IIFE shared settings: externals
70+
// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
71+
const external = [
72+
// list external dependencies, exactly the way it is written in the import statement.
73+
// eg. 'jquery'
74+
'vue',
75+
];
76+
77+
// UMD/IIFE shared settings: output.globals
78+
// Refer to https://rollupjs.org/guide/en#output-globals for details
79+
const globals = {
80+
// Provide global variable names to replace your external imports
81+
// eg. jquery: '$'
82+
vue: 'Vue',
83+
};
84+
85+
// Customize configs for individual targets
86+
const buildFormats = [];
87+
if (!argv.format || argv.format === 'es') {
88+
const esConfig = {
89+
...baseConfig,
90+
input: 'src/entry.esm.js',
91+
external,
92+
output: {
93+
file: 'dist/vue-toggle-component.esm.js',
94+
format: 'esm',
95+
exports: 'named',
96+
},
97+
plugins: [
98+
replace(baseConfig.plugins.replace),
99+
...baseConfig.plugins.preVue,
100+
vue(baseConfig.plugins.vue),
101+
...baseConfig.plugins.postVue,
102+
babel({
103+
...baseConfig.plugins.babel,
104+
presets: [
105+
[
106+
'@babel/preset-env',
107+
{
108+
...babelPresetEnvConfig,
109+
targets: esbrowserslist,
110+
},
111+
],
112+
],
113+
}),
114+
],
115+
};
116+
buildFormats.push(esConfig);
117+
}
118+
119+
if (!argv.format || argv.format === 'cjs') {
120+
const umdConfig = {
121+
...baseConfig,
122+
external,
123+
output: {
124+
compact: true,
125+
file: 'dist/vue-toggle-component.ssr.js',
126+
format: 'cjs',
127+
name: 'VueToggleComponent',
128+
exports: 'auto',
129+
globals,
130+
},
131+
plugins: [
132+
replace(baseConfig.plugins.replace),
133+
...baseConfig.plugins.preVue,
134+
vue(baseConfig.plugins.vue),
135+
...baseConfig.plugins.postVue,
136+
babel(baseConfig.plugins.babel),
137+
],
138+
};
139+
buildFormats.push(umdConfig);
140+
}
141+
142+
if (!argv.format || argv.format === 'iife') {
143+
const unpkgConfig = {
144+
...baseConfig,
145+
external,
146+
output: {
147+
compact: true,
148+
file: 'dist/vue-toggle-component.min.js',
149+
format: 'iife',
150+
name: 'VueToggleComponent',
151+
exports: 'auto',
152+
globals,
153+
},
154+
plugins: [
155+
replace(baseConfig.plugins.replace),
156+
...baseConfig.plugins.preVue,
157+
vue(baseConfig.plugins.vue),
158+
...baseConfig.plugins.postVue,
159+
babel(baseConfig.plugins.babel),
160+
terser({
161+
output: {
162+
ecma: 5,
163+
},
164+
}),
165+
],
166+
};
167+
buildFormats.push(unpkgConfig);
168+
}
169+
170+
// Export config
171+
export default buildFormats;

‎vue-toggle-component/dev/serve.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue';
2+
import Dev from './serve.vue';
3+
4+
const app = createApp(Dev);
5+
app.mount('#app');

‎vue-toggle-component/dev/serve.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script>
2+
import { defineComponent } from 'vue';
3+
import VueToggleComponent from '@/vue-toggle-component.vue';
4+
5+
export default defineComponent({
6+
name: 'ServeDev',
7+
components: {
8+
VueToggleComponent
9+
}
10+
});
11+
</script>
12+
13+
<template>
14+
<div id="app">
15+
<vue-toggle-component id="1" title="Toggle me" />
16+
</div>
17+
</template>

‎vue-toggle-component/dist/vue-toggle-component.esm.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { openBlock, createBlock, withDirectives, createVNode, vModelCheckbox, toDisplayString, withScopeId } from 'vue';
2+
3+
var script = {
4+
name: 'VueToggle',
5+
props: {
6+
activeColor: {
7+
type: String,
8+
default: '#9FD6AE'
9+
},
10+
darkTheme: {
11+
type: Boolean,
12+
default: false
13+
},
14+
id: {
15+
type: String,
16+
required: true
17+
},
18+
name: {
19+
type: [String, Boolean],
20+
default: false
21+
},
22+
title: {
23+
type: String,
24+
required: true
25+
},
26+
toggled: {
27+
type: Boolean,
28+
default: false
29+
}
30+
},
31+
32+
data() {
33+
return {
34+
toggleState: this.toggled
35+
};
36+
}
37+
38+
};
39+
40+
const _withId = /*#__PURE__*/withScopeId("data-v-121077f4");
41+
42+
const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $options) => {
43+
return openBlock(), createBlock("section", {
44+
class: ["wrapper", {
45+
dark: $props.darkTheme
46+
}],
47+
title: $props.title
48+
}, [withDirectives(createVNode("input", {
49+
id: $props.id,
50+
name: $props.name,
51+
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => $data.toggleState = $event),
52+
class: "toggle",
53+
type: "checkbox",
54+
onClick: _cache[2] || (_cache[2] = $event => $data.toggleState = !$data.toggleState)
55+
}, null, 8, ["id", "name"]), [[vModelCheckbox, $data.toggleState]]), createVNode("label", {
56+
for: $props.id,
57+
class: "toggler",
58+
style: [$data.toggleState && {
59+
'background': $props.activeColor
60+
}]
61+
}, null, 12, ["for"]), createVNode("span", {
62+
class: "title",
63+
textContent: toDisplayString($props.title),
64+
onClick: _cache[3] || (_cache[3] = $event => $data.toggleState = !$data.toggleState)
65+
}, null, 8, ["textContent"])], 10, ["title"]);
66+
});
67+
68+
function styleInject(css, ref) {
69+
if ( ref === void 0 ) ref = {};
70+
var insertAt = ref.insertAt;
71+
72+
if (!css || typeof document === 'undefined') { return; }
73+
74+
var head = document.head || document.getElementsByTagName('head')[0];
75+
var style = document.createElement('style');
76+
style.type = 'text/css';
77+
78+
if (insertAt === 'top') {
79+
if (head.firstChild) {
80+
head.insertBefore(style, head.firstChild);
81+
} else {
82+
head.appendChild(style);
83+
}
84+
} else {
85+
head.appendChild(style);
86+
}
87+
88+
if (style.styleSheet) {
89+
style.styleSheet.cssText = css;
90+
} else {
91+
style.appendChild(document.createTextNode(css));
92+
}
93+
}
94+
95+
var css_248z = "\n.wrapper[data-v-121077f4] {\n display: flex;\n flex-wrap: wrap;\n padding: 5px;\n}\n.wrapper > *[data-v-121077f4] {\n cursor: pointer;\n margin: 0 5px;\n}\n.title[data-v-121077f4] {\n display: inline-block;\n font-weight: 700;\n line-height: 2em;\n vertical-align: middle;\n}\n.title[data-v-121077f4]::selection {\n background: none;\n}\n.dark .title[data-v-121077f4] {\n color: white;\n}\n.toggle[data-v-121077f4] {\n display: none;\n}\n.toggle[data-v-121077f4]:after, .toggle + .toggler[data-v-121077f4] {\n box-sizing: border-box;\n}\n.toggle[data-v-121077f4]:after::selection, .toggle + .toggler[data-v-121077f4]::selection {\n background: none;\n}\n.toggle + .toggler[data-v-121077f4] {\n background: #f0f0f0;\n border-radius: 2em;\n display: block;\n height: 2em;\n outline: 0;\n padding: 2px;\n position: relative;\n transition: background 0.4s ease;\n user-select: none;\n width: 4em;\n will-change: background;\n}\n.toggle + .toggler[data-v-121077f4]:after {\n background: white;\n border-radius: 50%;\n content: \"\";\n display: block;\n height: 100%;\n left: 0;\n position: relative;\n transition: left 0.2s ease;\n width: 50%;\n will-change: left;\n}\n.dark .toggle + .toggler[data-v-121077f4] {\n background: #374151;\n}\n.toggle:checked + .toggler[data-v-121077f4]:after {\n left: 50%;\n}\n";
96+
styleInject(css_248z);
97+
98+
script.render = render;
99+
script.__scopeId = "data-v-121077f4";
100+
101+
// Import vue component
102+
// IIFE injects install function into component, allowing component
103+
// to be registered via Vue.use() as well as Vue.component(),
104+
105+
var entry_esm = /*#__PURE__*/(() => {
106+
// Get component instance
107+
const installable = script; // Attach install function executed by Vue.use()
108+
109+
installable.install = app => {
110+
app.component('VueToggleComponent', installable);
111+
};
112+
113+
return installable;
114+
})(); // It's possible to expose named exports when writing components that can
115+
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
116+
// export const RollupDemoDirective = directive;
117+
118+
export default entry_esm;

‎vue-toggle-component/dist/vue-toggle-component.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)