morgul / snowpack-plugin-vue2

A snowpack vue2 compiler that reuses `@snowpack/plugin-vue` verbatim.

Snowpack Vue 2 Plugin

This is a snowpack plugin for Vue v2.X, based off of the official Vue v3 plugin, @snowpack/plugin-vue. The primary goal of this plugin is to provide an 'adapter' layer for @vue/component-compiler-utils and vue-template-compiler to reuse as much of the official snowpack vue plugin as possible. With that goal in mind, this repo is set up with /plugin corresponding to a copy of the /plugins/plugin-vue code, so that should there ever be interest in making snowpack work with Vue2, the effort to port my changes to the vue plugin is minimal.

Why Vue 2?

Currently, even https://vuejs.org/ points to the v2.x documentation. It's not that Vue 3 is bad, by any means. It will eventually, take over as the leading version of Vue. The problem is, most libraries haven't updated yet, including a lot of the popular front-end frameworks. They won't have alpha versions for several more months, and probably won't have production versions till year's end. And those are just the popular, large projects. As a developer of dozens of Vue sites, I doubt I'll have my projects converted for at least a year, if not two.

I don't know about you, but I don't see why I should have to wait to start using Snowpack.

Usage

Simply install the plugin:

npm:

$ npm install -D @morgul/snowpack-plugin-vue2

yarn:

$ yarn add -D @morgul/snowpack-plugin-vue2

Then, add it to your snowpack.config.js:

// snowpack.config.json
{
  "plugins": [
    "@morgul/snowpack-plugin-vue2"
  ]
}

Development

This plugin is definitely me scratching my own itch. And I haven't even decided if I like snowpack yet. But there's a need, and while there's about three or four vue2 plugins... none of them worked when I tried. So, here's a more formal engineered solution.

Vue Library choice

Digging through the source code to vue-loader, I came upon @vue/component-compiler-utils, which appears to have been created after @vue/compiler-sfc, with the same API, as a way of centralizing the code for doing all of this. I agree that something like @vue/compiler-sfc is required, but that's Vue 3 only, so I'm glad they backported that design to Vue2. It makes my life significantly easier.

Note: As more development has happened, it's become clear that @vue/component-compiler-utils doesn't do everything that @vue/compiler-sfc, instead relying on vue-loader to do some of it. That's fine, we can slowly intriduce vue-loader code as needed to handle these edge cases.

Project Guidelines

These are the guidelines for working on this project.

• Absolutely no modifications to @vue/component-compiler-utils or vue-template-compiler.
• Minimal to no modifications to @snowpack/plugin-vue.
• All adaption code must live in /compiler.
• All plugin code must live in /plugin.
• Where possible, external packages are used without modification, only adaptation.

Project layout

The bulk of this project's code lives in /compiler. The /plugin is a verbatim copy of @snowpack/plugin-vue, with as few changes as possible. (Even the original package.json is kept around.) There is also a sample project contained in /example, to act as both a test for the plugin, and a usage guide.

snowpack-plugin-vue2's Issues

Extending SFC components does not work.

Attempting to follow the Vue Typescript Guide leads to declaring a sample component like this:

<template>
    <div id="main-app">
      Message: {{ msg }}
    </div>
</template>

<style lang="scss">
    #main-app {
        height: calc(100% - 64px);
    }
</style>

<script lang="ts">
    import Vue from 'vue';
    export default Vue.extend({
        data()
        {
            return {
                msg: 'Hello, Vue!'
            }
        }
    });
</script>

However, compiling this with snowpack-plugin-vue2 yields the following error message:

Scoped style not supported

Hi @Morgul

Your clean approach described in the README looks nice. I felt on your plugin trying to use snowpack and avoid webpack slowness in our devs.

So I did notice that <style scoped> is not working. It seems to come from a wider problem which is not reflected in your paragraph: https://github.com/Morgul/snowpack-plugin-vue2#vue-library-choice. That problem is that @vue/compiler-sfc does things that were not backported with @vue/component-compiler-utils, its Vue 2 false equivalent. They are similarities between SFCTemplateCompileOptions (1) and TemplateCompileOptions (2) but the scoped style feature lacks.

With webpack it worked because vue-loader precisely fulfills those discrepancies. I am not even sure that requesting you this feature (roughly to copy vue-loader work (3)) is the best solution. Shouldn't this have been done directly within @vue/component-compiler-utils?

1. https://github.com/vuejs/vue-next/blob/master/packages/compiler-sfc/src/compileTemplate.ts#L43
2. https://github.com/vuejs/component-compiler-utils#compiletemplatetemplatecompileoptions-templatecompileresults
3. https://github.com/vuejs/vue-loader/blob/master/lib/index.js#L163

nullish coalescing is not supported in node v12

Hey, thanks for your work!

I bumped into this line:
https://github.com/Morgul/snowpack-plugin-vue2/blob/80c39845a2f659e041f05a2a063b9f2a360db1fd/compiler/index.js

compilerParseOptions: { pad: pad ?? 'line' },
                                  ^

SyntaxError: Unexpected token '?'

Ubuntu still ships v10 as default.
nodejs/node#33007 (comment)

Not a huge problem, but I belive you should not drop compatiblity for what seems to be a single line / syntax sugar.

This below is 100% the same.
Babel output with nodeV12:

// node >= v14.0.0
pad ?? 'line';

// node >= 10 ( 12 )
"use strict";

var _pad;

(_pad = pad) !== null && _pad !== void 0 ? _pad : 'line';

There is likely a more elegant equivalent, but I would like to keep the plugin in-tact for everyone else.