feat: init

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -0,0 +1,27 @@
+---
+name: Bug report
+about: Create a report to help us improve
+labels: 'bug: pending triage'
+---
+
+## Bug description
+<!--
+  A clear and concise description of what the expected behavior is and what happened instead.
+-->
+
+## Reproduction steps
+<!--
+  Providing reproduction steps are crucial for communicating the problem.
+
+  Please open a PR with a failing test case or provide a link to a repo that can reproduce the problem you ran into.
+
+  Keep your reproductions minimal. Follow guidelines here: https://stackoverflow.com/help/minimal-reproducible-example
+-->
+
+## Environment
+
+- webpack-localize-asets-plugin version:
+- Webpack version:
+- Operating System:
+- Node version:
+- Package manager (npm/yarn/pnpm) and version:

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -0,0 +1,25 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+labels: 'feature request'
+---
+
+## Is your feature request related to a problem? Please describe.
+<!--
+  A clear and concise description of what the problem is. Ex. I'm frustrated when [...]
+-->
+
+## Describe the solution you'd like
+<!--
+  A clear and concise description of what you want to happen.
+-->
+
+## Describe alternatives you've considered
+<!--
+  A clear and concise description of any alternative solutions or features you've considered.
+-->
+
+## Additional context
+<!--
+  Add any other context or screenshots about the feature request here.
+-->

.github/workflows/release.yml

@@ -0,0 +1,31 @@
+name: Release
+
+on:
+  push:
+    branches: master
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: 14.x
+    - name: Install dependencies
+      run: npx ci
+    - name: Build
+      run: npm run build
+    - name: Lint
+      run: npm run lint
+    - name: Test
+      run: npm run test --if-present
+    - name: Release
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      run: npx semantic-release

.github/workflows/test.yml

@@ -0,0 +1,32 @@
+name: Test
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [master, develop]
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x]
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: Install dependencies
+      run: npx ci
+    - name: Build
+      run: npm run build
+    - name: Lint
+      run: npm run lint
+    - name: Test
+      run: npm run test --if-present

.gitignore

@@ -0,0 +1,26 @@
+# macOS
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Dependency directories
+node_modules/
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env
+.env.test
+
+# VSCode
+.vscode
+
+# Distribution
+dist

.nvmrc

@@ -0,0 +1 @@
+v14.16.1

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Hiroki Osame <hiroki.osame@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,111 @@
+# vue-frag-plugin <a href="https://npm.im/vue-frag-plugin"><img src="https://badgen.net/npm/v/vue-frag-plugin"></a> <a href="https://npm.im/vue-frag-plugin"><img src="https://badgen.net/npm/dm/vue-frag-plugin"></a> <a href="https://packagephobia.now.sh/result?p=vue-frag-plugin"><img src="https://packagephobia.now.sh/badge?p=vue-frag-plugin"></a>
+
+Use multiple root nodes in your Vue.js 2 [Single-file Components (SFCs)](https://vuejs.org/v2/guide/single-file-components.html). Powered by [`vue-frag`](https://github.com/privatenumber/vue-frag).
+
+
+```vue
+<template>
+    <span>
+        Hello
+    </span>
+    <span>
+        Multiple root nodes
+    </span>
+</template>
+```
+
+<sub>Support this project by ⭐️ starring and sharing it. [Follow me](https://github.com/privatenumber) to see what other cool projects I'm working on! ❤️</sub>
+
+## 🚀 Install
+```sh
+npm i -D vue-frag-plugin vue-frag
+```
+
+## 🙋‍♂️ Why?
+[`vue-frag`](https://github.com/privatenumber/vue-frag) is a directive that lets you use Fragments in Vue.js 2 components, but you have to manually register it and insert it as the root node.
+
+`vue-frag-plugin` is a build-time plugin that automates this process, injecting vue-frag where necessary. You will be able to use multiple root nodes seamlessly in your SFCs, bringing the developer experience much closer to Vue 3.
+
+## 🚦 Quick setup
+
+### Webpack
+Add `vue-frag-plugin/loader` before `vue-loader` in `webpack.config.js`.
+
+<details>
+  <summary>Example <code>webpack.config.js</code></summary>
+  <br>
+
+```diff
+   module.exports = {
+     ...,
+
+     module: {
+       rules: [
+         ...,
+
+         // Update the vue-loader rule to insert `vue-frag-plugin/loader` before it
+         {
+           test: /\.vue$/,
+-          loader: 'vue-loader',
++          use: [
++            'vue-loader',
++            'vue-frag-plugin/loader'
++          ]
+         }
+       ]
+     }
+   }
+```
+</details>
+
+
+### Rollup / Vite
+1. Import `vueFrag` from `vue-frag-plugin`
+2. Add it to `plugins` before the Vue plugin in `rollup.config.js` or `vite.config.js`
+
+<details>
+  <summary>Example <code>rollup.config.js</code></summary>
+  <br>
+
+```diff
+  import { definePlugin } from 'rollup
+  import vue from 'rollup-plugin-vue'
++ import { vueFrag } from 'vue-frag-plugin'
+
+ export default definePlugin({
+   ...,
+
+   plugins: [
++    vueFrag(), // Important this goes before `vue()`
+     vue()
+   ],
+
+   ...
+ })
+```
+</details>
+
+<details>
+  <summary>Example <code>vite.config.js</code></summary>
+  <br>
+
+```diff
+  import { definePlugin } from 'vite'
+  import { createVuePlugin } from 'vite-plugin-vue2'
++ import { vueFrag } from 'vue-frag-plugin'
+
+ export default definePlugin({
+   ...,
+
+   plugins: [
++    vueFrag(), // Important this goes before `createVuePlugin()`
+     createVuePlugin()
+   ],
+
+   ...
+ })
+```
+</details>
+
+## 💞 Related
+- [unplugin-vue2-script-setup](https://github.com/antfu/unplugin-vue2-script-setup) - Build-time plugin to use `<script setup>` in Vue 2 SFC

examples/rollup/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "@vue-frag-plugin/rollup",
+	"private": true,
+	"version": "0.0.0",
+	"files": [],
+	"scripts": {
+		"build": "rollup -c rollup.config.js",
+		"serve": "sirv www"
+	},
+	"dependencies": {
+		"vue": "^2.6.14",
+		"vue-frag": "^1.3.1"
+	},
+	"devDependencies": {
+		"@rollup/plugin-node-resolve": "^13.0.6",
+		"rollup": "^2.58.3",
+		"rollup-plugin-replace": "^2.2.0",
+		"rollup-plugin-vue": "^5.1.9",
+		"sirv-cli": "^1.0.14",
+		"vue-frag-plugin": "link:../.."
+	}
+}

examples/rollup/rollup.config.js

@@ -0,0 +1,28 @@
+import path from 'path';
+import { defineConfig } from 'rollup';
+import resolve from '@rollup/plugin-node-resolve';
+import vue from 'rollup-plugin-vue';
+import { vueFrag } from 'vue-frag-plugin';
+import replace from 'rollup-plugin-replace';
+
+export default defineConfig({
+	input: './src/index.js',
+
+	plugins: [
+		resolve({
+			moduleDirectories: [path.resolve(__dirname, 'node_modules')],
+		}),
+		vueFrag(),
+		vue(),
+		replace({
+			'process.env.NODE_ENV': JSON.stringify('production'),
+		}),
+	],
+
+	output: {
+		dir: './www/dist',
+		format: 'commonjs',
+		exports: 'auto',
+		interop: false,
+	},
+});

examples/rollup/src/FragmentTest.vue

@@ -0,0 +1,24 @@
+<template>
+	<template v-if="!isParentInDom">
+		<div>
+			Hello
+		</div>
+		<div>
+			Fragments
+		</div>
+	</template>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			isParentInDom: undefined,
+		};
+	},
+
+	mounted() {
+		this.isParentInDom = this.$el.isConnected;
+	},
+};
+</script>

examples/rollup/src/index.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import MultiRootComponent from './FragmentTest.vue';
+
+new Vue({
+	el: '#app',
+	render: h => h(MultiRootComponent),
+}).$mount();

examples/rollup/www/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8"/>
+		<script defer="defer" src="./dist/index.js"></script>
+	</head>
+	<body>
+		<div id="app"></div>
+	</body>
+</html>