egoist / esbuild-plugin-vue Goto Github PK

View Code? Open in Web Editor NEW

137.0 4.0 6.0 286 KB

Basic .vue support for esbuild.

License: MIT License

JavaScript 2.40% TypeScript 92.12% Vue 1.98% HTML 3.49%

esbuild-plugin-vue's Introduction

💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.

esbuild-plugin-vue

Basic .vue support for esbuild.

Features

<script setup>
TypeScript support
Scoped style support

Install

npm i esbuild-plugin-vue @vue/compiler-sfc

Usage

import { build } from 'esbuild'
import vue from 'esbuild-plugin-vue'

build({
  plugins: [vue()],
})

License

MIT © EGOIST

esbuild-plugin-vue's People

Contributors

Stargazers

Watchers

Forkers

vueworkflow liu-lihao hiteshmah-jan sondh0127 neostfox

esbuild-plugin-vue's Issues

Path error

import { createApp } from 'vue'
import Index from '/src/options/index.vue'

const app = createApp(Index)
app.mount('#root')

 // The same is true for other onloads
 build.onLoad({filter: /\.vue$/, namespace: "vue"}, async (args) => {
     // args.path === '/src/options/index.vue'
    //  The original code will report an error
    //  no such file or directory, open '/src/options/index.vue'
    const content = await fs.promises.readFile(args.path, "utf8");
    // temporary solution
    const content = await fs.promises.readFile(path.join(process.cwd(), args.path), "utf8");
    // In fact, we should consider relative path, absolute path and alias,
    // but we can't get other information through args

    // ...
 }

Vuex Store isn't available in computed properties

We have esbuild system with vue plugin. We also use Vuex store and configuration is as below:

import Vue from 'vue/dist/vue.esm.js';
import store from 'store';
Vue.component('Component', require('components/component.vue').default);
const app = new Vue({
    el: '#app',
    store: store
  });
});

In component.vue

export default {
  name: 'Component',
  components: {
    ...Other Components
  },
  data() {
    return {};
  },
  computed: {
    coms() {
      return this.$store.getters.coms;
    }
  }
}

In component file the $store variable is undefined in computed properties functions. But it is available inside mount hook.
Same configuration with webpacker doesn't have issue.

Our esbuild config

const path = require('path');
const rails = require('esbuild-rails');
const vue = require('esbuild-vue');

require('esbuild')
  .build({
    entryPoints: ['application.js'],
    bundle: true,
    outdir: path.join(process.cwd(), 'app/assets/builds'),
    splitting: true,
    format: 'esm',
    absWorkingDir: path.join(process.cwd(), 'app/javascript'),
    watch: process.argv.includes('--watch'),
    minify: process.argv.includes('--minify'),
    sourcemap: process.argv.includes('--sourcemap'),
    loader: { '.svg': 'dataurl', '.png': 'dataurl' },
    plugins: [rails(), vue()]
  })
  .catch(() => process.exit(1));

No style tag throw error (script setup)

template or render function not defined

Getting the following with the barest of barebone test pages:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Index>
       <Root>

But alas, it is.

The automated release is failing 🚨

🚨 The automated release from the `main` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Thank you! It works with Yarn2+ (pnp), workspaces, typescript, vue3

We were really stuck on how to get a project with Yarn 2+, with plug-n-play, complete with workspaces, typescript, and all the sweet hookups, working with esbuild and Vue3. This was the plugin that did it!

Our resulting scripts/build.js was something like this:

const vue = require('esbuild-plugin-vue').default;
const { pnpPlugin } = require('@yarnpkg/esbuild-plugin-pnp');
const esbuild = require('esbuild');

  esbuild
    .build({
      bundle: true,
      // This order is important!!
      plugins: [pnpPlugin(), vue()],
      // This loader was needed because otherwise we ran into "Do not know how to load path: pnp:/.../App.vue"
      loader: {
        '.vue': 'vue'
      },
      entryPoints: ['src/main.ts'],
      outdir: 'dist'
    })
    .catch(() => process.exit(1));