Not compatible with browser based vue instance

[Pyronerd62]

I've found your library I'm and super impressed. I went through the javascript version and everything looks good even though when you click on a day d.sameDay is not a function. No biggie. I didn't plan on using the plain version. See Dayspan.Js Code Pen https://codepen.io/Pyronerd62/pen/dQyydy

However when trying to install your library via script tags we get "Uncaught ReferenceError: require is not defined".

We cannot use webpack in our project as it's a legacy project that we use Vue in the pages itself. Please let me know if this is a bug or by design. Do dayspan-vuetify only work in vue-cli projects? See Dayspan-Vuetify Code Pen https://codepen.io/Pyronerd62/pen/xQxxYe

For both of these I'm using cdn versions of dayspan and dayspan-vuetify which I've checked are identical to your latest version.

[ClickerMonkey]

I'll see if I can get a version of the build that works outside of vue-cli

[Pyronerd62]

Hey @ClickerMonkey,

I've been playing with the build for the past day and I figured out to make the build work in

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

var env = config.lib.env

baseWebpackConfig.entry = {
  'dayspan-vuetify': './src/lib.js'
}

var webpackConfig = merge(baseWebpackConfig, {
  // Comment this config out. Since we can't import an es6 module in a browser based vue instance we need to package dependencies together
  /* externals: [
    function(context, request, cb) {
      if(/^[a-z\-0-9]+$/.test(request)) {
        cb(null, 'commonjs ' + request);
        return;
      }
      cb();
    }
  ], */
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.lib.productionSourceMap,
      extract: true
    })
  },
  devtool: config.lib.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.lib.assetsRoot,
    filename: utils.assetsLibPath('[name].min.js'),
    library: '[name]',
    libraryTarget: 'umd'
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsLibPath('[name].min.css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    })
  ]
})

if (config.lib.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.lib.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.lib.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

Step 2. src->plugin.js There's a couple things to make this work with the demo docs. Some of this can be ignored but if you want to start with the src->app.vue template then you will need to do this.

1. You'll need the dayspan.js library but there's no sense in including it twice since it will packaged with the plugin itself but we need to be able to access it so we're going to add a DS variable to the Vue instance. We also need the dsMerge function for the demo app so we're going to create a new object for the vue instance called FC.

2. We need to be able to import the plugin via script tags Reference: https://alligator.io/vuejs/creating-custom-plugins/#automatic-installation For people who use your plugin outside of a module system, it is often expected that if your plugin is included after the Vue script tag, that it will automatically install itself without the need to call Vue.use(). You can implement this by appending these lines to the end of my-vue-plugin.js:

// Automatic installation if Vue has been added to the global scope. if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(MyPlugin) }

So adjust your plugin.js file to this

import { dsMergeOptions, dsMergeValidate, dsValidate, dsDefaults, dsBind, dsMerge } from './functions';
import { default as Component } from './component';
import * as ComponentMap from './components'
import * as DS from 'dayspan'

const DayspanVuetify = {

  install(Vue, options)
  {
    // register all components globally
    for (var componentName in ComponentMap)
    {
      Vue.component( componentName, ComponentMap[ componentName ] );
    }

    // $dayspan is just another reactive component
    var $dayspan = new Vue( options
      ? dsMergeOptions( options, Component )
      : Component );


    // allow directives to access $dayspan
    Vue.$dayspan = $dayspan;

    // allow components to access $dayspan
    Vue.prototype.$dayspan = $dayspan;
    Vue.FC = {
      dsMerge : dsMerge,
    }
    Vue.DS = DS;

    // allow components to pull & merge default component props into given
    // component props.
    Vue.prototype.$dsValidate = dsMergeValidate;
    Vue.prototype.$dsDefaults = dsDefaults;

    // allow v-bind="{$scopedSlots}"
    Vue.prototype._b = dsBind(Vue.prototype._b);

    // Call initialization functions
    $dayspan.init();
  }

};


if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(DayspanVuetify)
}

export default DayspanVuetify

Now you can build your own via npm run build:lib.

Here's a sample project that will work in the browser https://github.com/Rjgoolsby/Dayspan-Vuetify-Browser-Build-Demo

Also, sorry for the different repository account name. I didn't realize that I was using my work account when I opened the issue. Rjgoolsby is my personal github account.

[ClickerMonkey]

Thank you for your work, I'm looking into it!