Updated reading of files

Author: alajfit

README.md

@@ -2,6 +2,7 @@
 Run Vue Single File Components from the CLI
 
 [![npm](https://img.shields.io/npm/v/vue-run.svg) ![npm](https://img.shields.io/npm/dm/vue-run.svg)](https://www.npmjs.com/package/vue-run)
+![Vue 2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)
 
 > Currently a WIP, star us and key an eye out
 

bin/vue-sfc-runner.js

@@ -1,29 +1,3 @@
 #!/usr/bin/env node
 console.log('Running a Vue File')
-
-/**
- * Steps
- * 1. Run vsr on the CLI
- * 2. Shown a list of Vue files in the current directory
- * 3. Ask for props data
- * 4. Run the file in the browser
- */
-
-const fs = require('fs')
-const path = require('path')
-const inquirer = require('inquirer')
-
-async function run() {
- const availableFiles = fs.readdirSync(process.cwd()).filter(file => path.extname(file) === ".vue")
-
- const questions = await inquirer.prompt([
- {
- name: 'files',
- message: 'Please select a Vue Component',
- type: 'list',
- choices: availableFiles
- }
- ])
-}
-
-run()
+require('../src')()

package-lock.json

@@ -40,6 +40,15 @@
  "vuepress": "^0.10.2"
  },
  "dependencies": {
- "inquirer": "^6.0.0"
+ "babel-loader": "^7.1.5",
+ "css-loader": "^1.0.0",
+ "html-webpack-plugin": "^3.2.0",
+ "inquirer": "^6.0.0",
+ "less-loader": "^4.1.0",
+ "sass-loader": "^7.0.3",
+ "vue-loader": "^15.2.4",
+ "vue-style-loader": "^4.1.0",
+ "webpack": "^4.15.1",
+ "webpack-serve": "^1.0.4"
  }
 }

package.json

@@ -0,0 +1,59 @@
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const path = require('path')
+
+function entry (componentName, fileImport) {
+ return `
+ document.querySelector('body').innerHTML = '<div id="app"><${componentName} /></div>'
+
+ import Test from '${fileImport}'
+ import Vue from 'vue/dist/vue.js'
+ `
+}
+
+module.exports = opts => {
+
+ const config = {
+ devtool: 'eval-source-map',
+ devServer: {
+ contentBase: opts.cwd,
+ compress: true,
+ open: true,
+ port: 9000,
+ disableHostCheck: true
+ },
+ entry: () => entry(opts.componentName, opts.entry), // './test/demo/entry.js',
+
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ loaders: {
+ js: {
+ loader: 'babel-loader'
+ }, 
+ scss: 'vue-style-loader!css-loader!sass-loader',
+ sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
+ less: 'vue-style-loader!css-loader!less-loader'
+ }
+ }
+ },
+ {
+ test: /\.js$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader'
+ }
+ }
+ ]
+ },
+
+ plugins: [
+ new HtmlWebpackPlugin()
+ ]
+ }
+
+ return config
+}

src/cli/index.js

@@ -1 +1,37 @@
-console.log('Run Vue')
+const fs = require('fs')
+const path = require('path')
+const inquirer = require('inquirer')
+
+const serve = require('webpack-serve')
+const configSFC = require('./engine/webpack.config.js')
+
+/**
+ * Steps
+ * 1. Run vsr on the CLI
+ * 2. Shown a list of Vue files in the current directory
+ * 3. Ask for props data
+ * 4. Ask for container priming e.g. align, width
+ * 5. Run the file in the browser
+ */
+
+async function run() {
+ const availableFiles = fs.readdirSync(process.cwd()).filter(file => path.extname(file) === ".vue")
+
+ const questions = await inquirer.prompt([
+ {
+ name: 'file',
+ message: 'Please select a Vue Component',
+ type: 'list',
+ choices: availableFiles
+ }
+ ])
+
+ const config = configSFC({
+ cwd: process.cwd(),
+ componentName: questions.file.replace(/([a-z](?=[A-Z]))/g, '$1-').split('.')[0].toLowerCase(),
+ entry: `${process.cwd()}/${questions.file}`
+ })
+ serve({ config })
+}
+
+module.exports = run