profile
viewpoint

vuejs/vue 164769

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

vuejs/vetur 4235

Vue tooling for VS Code.

vuejs/vuefire 2851

🔥 Firebase bindings for Vue.js & Vuex

kazupon/vue-validator 2234

:white_check_mark: Validator component for Vue.js

karol-f/vue-custom-element 1533

Vue Custom Element - Web Components' Custom Elements for Vue.js

vuejs/rollup-plugin-vue 647

Roll .vue files

vuejs/vue-jest 461

Jest Vue transformer

vuejs/vue-router-next 384

The Vue 3 official router (WIP)

TheLarkInn/unity-component-specification 210

This is a WIP draft of the Unity (Single File Web Component) Specification

vuejs/vue-curated 178

🖼️ The curated Vue packages list

issue closedvitejs/vite

Still confused how to custom build process?

I'm trying to write a React component development template out of vitejs. And the build part of the doc seems confusing.

const { build } = require('vite')

;(async () => {
  // All options are optional.
  // check out `src/node/build.ts` for full options interface.
  const result = await build({
    rollupInputOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    },
    rollupOutputOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    },
    rollupPluginVueOptions: {
      // https://github.com/vuejs/rollup-plugin-vue/tree/next#options
    }
    // ...
  })
})()

It says write a file like this, but where do I put the file? The structure is like

/src
vite.config.js
package.json

closed time in 10 minutes

FateRiddle

issue commentvitejs/vite

Still confused how to custom build process?

That’s the API section which is for building tools on top of Vite. If using a config file, all build options can be specified in the config file directly.

FateRiddle

comment created time in 10 minutes

issue commentvuejs/vue-next

Slots with modifiers

That’s a parser level change - making it work is essentially adding a special case to the parsing rules. Ideally we should avoid that.

Is it difficult to switch to different slot names?

KaelWD

comment created time in 9 hours

push eventvitejs/vite

Evan You

commit sha 0330b2a1f56ea8fa443207c524d817d7de772b56

fix: remove query from resolved src import

view details

push time in 10 hours

push eventvitejs/vite

Evan You

commit sha e2594dffe42776cf8c53725d79525fb0b8b08d68

fix: lazy require @vue/compiler-dom so it respects NODE_ENV

view details

Evan You

commit sha 9a4424822a8d3b3583504b827e1b7089b4319a30

fix: fix import chain walking

view details

Evan You

commit sha ae6b49d5bd71a18f917d3a5e57ec3c4b9351da59

fix: resolve full extension for SFC src imports

view details

Evan You

commit sha f94685aa23728789c77a8bd7d018c88aa7a7d574

chore: do not log ignored dynamic import

view details

push time in 10 hours

issue closedvuejs/vue-next

web-components 自定义指令 v-model 的实现 变量name 缺失/或有其他方式能够实现v-model求帮助

Version

3.0.0-beta.14

Reproduction link

https://jsbin.com/roxehov/edit?html,console,output

Steps to reproduce

web-components 自定义 v-model 实现 name 缺失

beforeMount(el, binding, vnode) {
      const inputHandler = event => {
        console.log(event.target.value)
        // 下一行 instance 如果能够自动拿到当前变量的名称,就不用手动再绑定一个 data-model-name在dom上了,望实现
        binding.instance[el.getAttribute('data-model-name')] = event.target.value
      }
      el.addEventListener('input', inputHandler);
    },

What is expected?

添加binding或vnode上获取到v-model变量的名称

What is actually happening?

没有这个名称

<!-- generated by vue-issues. DO NOT REMOVE -->

closed time in 10 hours

nshusr

issue commentvuejs/vue-next

web-components 自定义指令 v-model 的实现 变量name 缺失/或有其他方式能够实现v-model求帮助

要双绑就用 v-model,不要用自定义的。3.0 的 v-model 可以带参数的。

nshusr

comment created time in 10 hours

pull request commentvitejs/create-vite-app

Improve warnings of bucklescript compiler

/cc @tatchi

hamza0867

comment created time in 18 hours

push eventvuejs/vue-next

Evan You

commit sha 5f15d9aa4b9024b3764b962bee042d72f94dee91

fix(compiler-ssr): should escape template string interpolation chars in generated code

view details

push time in 18 hours

push eventvuejs/vue-next

Evan You

commit sha e38cebac1638232265982e1c597818fcf297397d

fix(compiler-ssr): should escape template string interpolation chars in generated code

view details

push time in 19 hours

push eventvitejs/create-vite-app

Evan You

commit sha 9d89aa1319a941dba152c3f9d8f7d97823e2e1c0

update preact

view details

Evan You

commit sha 53fc66312b58d079072e1ae78e71d3d54ada06f4

v1.10.0

view details

push time in 19 hours

push eventvitejs/vite

Evan You

commit sha 286fb2fd3534a0bdc204a380ebbc5d465a3f6707

docs: update readme for 0.17 [ci skip]

view details

push time in 20 hours

pull request commentJoviDeCroock/prefresh

(vite) - update for vite 0.17 hmr api change

Done, not sure if I've done it right 😅

yyx990803

comment created time in 21 hours

push eventyyx990803/prefresh

Evan You

commit sha a1f412833fe29dbacb21bc84f476b988ba2f1a72

add changeset

view details

push time in 21 hours

push eventvitejs/create-vite-app

Evan You

commit sha e52bb103f39eaf7876ce42611d589041b534bf2e

update vue, react, reason-react template to vite 0.17

view details

Evan You

commit sha 74eb66cb153afe5641beed3899796c69abfcc8cb

v1.9.0

view details

Evan You

commit sha e92a1ab9d777076b9140d7be9c152e27cdc8672d

v1.9.1

view details

Evan You

commit sha b79d376f629dfa98de157e09ec530181ac459c22

temporarily revert preact template dependency

view details

push time in 21 hours

PR opened JoviDeCroock/prefresh

(vite) - update for vite 0.17 hmr api change

The example isn't updated because it needs to wait until @prefresh/vite publishes a new version.

+4 -5

0 comment

2 changed files

pr created time in 21 hours

create barnchyyx990803/prefresh

branch : vite-update

created branch time in 21 hours

fork yyx990803/prefresh

Hot Module Reloading for Preact

fork in 21 hours

push eventvitejs/vite-plugin-react

Evan You

commit sha dc99b7d01cb36ee28fbe9b94ea418823d8f5e27c

v2.0.0

view details

push time in 21 hours

push eventvitejs/vite-plugin-react

Evan You

commit sha 3f837525fd59a2a35487be32f46951a2d09eac7d

feat: compat with vite 0.17

view details

push time in 21 hours

push eventvitejs/vite

Evan You

commit sha ea97bd155a613f40930c1b3ae9eebfc273d297af

chore: changelog [ci skip]

view details

Evan You

commit sha 87f03a81220456f7d246dcb6bb9fbc21a45fc227

v0.17.0

view details

push time in 21 hours

pull request commentvitejs/vite-plugin-react

fix: fix ts build errors

This is a vite issue - fixed in https://github.com/vitejs/vite/commit/e86da9e6b56aeaf985ecf590fd775582952279b0

csr632

comment created time in a day

push eventvitejs/vite

Evan You

commit sha e86da9e6b56aeaf985ecf590fd775582952279b0

fix: fix type dependencies

view details

push time in a day

push eventvitejs/vite-plugin-react

csr632

commit sha 928c40bd566e977e3950d986967eb2c44b6d185b

chore: add prettier config (#10)

view details

push time in a day

push eventvitejs/vite-plugin-react

csr632

commit sha 42132d8d1be634ad858d369869a2be0416e04bab

feat: expose react code transform util (#8) * feat: expose transform util * fix: transformUtil -> transformReactCode

view details

push time in a day

PR merged vitejs/vite-plugin-react

feat: expose react code transform util

It can be used by tools that generate react code (.e.g mdx) to support hmr. vite-plugin-mdx can use this: https://github.com/csr632/vite-plugin-mdx/blob/7abb76135a2294156d91b3952e8fa6b33b4696d8/src/index.ts#L43

+27 -20

0 comment

1 changed file

csr632

pr closed time in a day

issue closedvitejs/vite

Scoped css data attribute behave differently depending if we use a render function or a compiled template block

Describe the bug

When rendering a component built with a render function (using h) with a scoped css block, the styling is broken, no style is applied. What happened The scoped css attribute data-v-xxx gets a -s appended. Meanwhile the css is scoped without the -s, thus it breaks the styling. See image below What is expected: Styling should not break (here both component should be red)

Not sure this is related to vite though, could be vue 3 runtime

Reproduction

https://github.com/AlexandreBonaventure/vite-scoped-css-bug Component with a template block: https://github.com/AlexandreBonaventure/vite-scoped-css-bug/blob/master/TestComp.vue Component with a render function: https://github.com/AlexandreBonaventure/vite-scoped-css-bug/blob/master/TestCompWithH.vue

System Info

-vite version: 0.16.12 -vue version: 3.0.0-beta.14

closed time in a day

AlexandreBonaventure

issue commentvitejs/vite

Scoped css data attribute behave differently depending if we use a render function or a compiled template block

Vue 3 SFC scoped styles does not work with render functions (for now). Please open an issue in vue-next instead.

AlexandreBonaventure

comment created time in a day

push eventvitejs/vite

Evan You

commit sha 2e81e64929d9c2909ff5882b26933ea54a353aab

fix: use more robust export default replacement for SFC scripts fix #271

view details

push time in a day

issue closedvitejs/vite

Import rewrite ignore comments

Describe the bug

It seems like import rewriter is ignoring comments and throw error

[vite] Error: module imports rewrite failed for /components/HelloWorld.vue.
 SyntaxError: Only one default export allowed per module. (31:0)
    at Parser._raise (/Users/alexandregeissmann/Sites/repros/vite-export-rewrite-bug/node_modules/@babel/parser/lib/index.js:742:17)

What is expected: Vite should not throw any error and ignore the commented line

Reproduction

This repro is a bare npx create-vite-app https://github.com/AlexandreBonaventure/vite-export-rewrite-bug I only modified HelloWorld component here: https://github.com/AlexandreBonaventure/vite-export-rewrite-bug/blob/master/components/HelloWorld.vue#L8

System Info

don't think it is relevant

closed time in a day

AlexandreBonaventure

push eventvitejs/vite

Evan You

commit sha e67b698a9ba18a99cb64f52df61fae176382f9ff

fix: resolve vuePath in all cases fix #270

view details

push time in a day

issue closedvitejs/vite

Production builds don't work with Vue JSX

Describe the bug

When trying to run a production build for a JSX-based Vue project, the build finishes but trying to serve the dist folder doesn't render anything and gives this error:

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Reproduction

Clone this repo, run yarn build, then serve the dist folder and visit it in the browser.

https://github.com/adamwathan/vite-jsx-build-fail

System Info

  • required vite version: 0.16.12
  • required Operating System: macOS 10.15.3
  • required Node version: v13.12.0
  • Optional:
    • npm/yarn version: 1.22.4
    • Installed vue version (from yarn.lock or package-lock.json): 3.0.0-beta.14
    • Installed @vue/compiler-sfc version: 3.0.0-beta.14

Logs (Optional if provided reproduction)

  1. Run vite or vite build with the --debug flag.
  2. Provide the error log here.
 vite build --debug
vite v0.16.12
Building for production...
  vite:resolve (extension) /Users/adamwathan/Code/vite-jsx-build-fail/Users/adamwathan/Code/vite-jsx-build-fail/index.html -> /Users/adamwathan/Code/vite-jsx-build-fail/Users/adamwathan/Code/vite-jsx-build-fail/index.html +0ms
  vite:build:asset /Users/adamwathan/Code/vite-jsx-build-fail/favicon.ico -> /_assets/favicon.0e56a3c3.ico +0ms
  vite:resolve (extension) /Users/adamwathan/Code/vite-jsx-build-fail/vite/jsx -> /Users/adamwathan/Code/vite-jsx-build-fail/vite/jsx +150ms
'vue' is imported by ../../../../vite/jsx, but could not be resolved – treating it as an external dependency
[write] dist/_assets/index.8345e3ca.js 34.91kb, brotli: 12.72kb
[write] dist/_assets/style.bba68bf6.css 0.00kb, brotli: 0.00kb
[write] dist/_assets/favicon.0e56a3c3.ico 4.19kb, brotli: 0.74kb
[write] dist/index.html 0.32kb, brotli: 0.14kb
Build completed in 2.05s.

closed time in a day

adamwathan

push eventcsr632/vite

Evan You

commit sha d7de050b996468a64fc279da60c61655aafb959e

Update index.ts

view details

push time in a day

PR merged vitejs/vite

fix: ora swallow rollup warning

Fix: https://github.com/vitejs/vite/issues/268

+13 -3

0 comment

2 changed files

csr632

pr closed time in a day

push eventvitejs/vite

csr632

commit sha d71a06da04954282896e53e16692590101b82c2e

fix: await rollup resolve result (#267)

view details

push time in a day

issue closedvitejs/vite

ora swallow rollup warning when building

Describe the bug

console.xxx should be used carefully when ora spinner is running: https://github.com/sindresorhus/ora/issues/90

Currently, spinner is swallowing rollup warning when building.

Reproduction

https://github.com/csr632/test-vite/tree/reproduce-vite-268 Execute npm run build, rollup should warn about import { asd } from "asdasd"; can not be resolved. But currently you can't see any warning.

closed time in a day

csr632

push eventvitejs/vite

csr632

commit sha 610a00441f8c0faa2e048a0910cf04f9f3810eef

fix: ora swallow rollup warning (#269)

view details

push time in a day

PR merged vitejs/vite

fix: rollup resolve alias

this.resolve return a promise. This promise may resolve to null. Without awaiting this promise, the next line resolved || { id } does not make sense.

+1 -1

0 comment

1 changed file

csr632

pr closed time in a day

push eventvitejs/vite

underfin

commit sha d229a5b9014d71cf81f76f8328a5d29c0f02c3a8

refactor: let the mean of `publicPath` and `filePath` more clear and consistence (#266)

view details

push time in a day

pull request commentvitejs/vite

feat: skip unused json watch apply

Is this even necessary? handleJSReload already has importer check and won't do anything if a file is never imported in js.

underfin

comment created time in a day

pull request commentvitejs/vite

fix: dotenv debug option

This is such weird handling on dotenv's part...

daychongyang

comment created time in a day

push eventvitejs/vite

Day

commit sha ca1b551c541ed3364374652b9b55e9f0e78b0c3c

fix: dotenv debug option (#263)

view details

push time in a day

PR merged vitejs/vite

fix: dotenv debug option

The debug option of dotenv is very unfriendly, the type check makes it can only be set to boolean or undefined, but when its value is not equal to null, the debug information is always printed by default.

+1 -1

0 comment

1 changed file

daychongyang

pr closed time in a day

push eventvitejs/vite

underfin

commit sha 5435737d126a2d08e7e950dbf4952fc903574d19

fix: css cache check (#262)

view details

push time in a day

PR merged vitejs/vite

fix: css cache check
+15 -21

0 comment

1 changed file

underfin

pr closed time in a day

pull request commentvitejs/vite

feat: expose esbuild to transform

Hmm, just exposing the service doesn't seem different from using esbuild directly. Why not expose the transform as trasnformWithEsbuild?

csr632

comment created time in a day

push eventvitejs/vite

Evan You

commit sha 197499a9a72b5ba51201bfc6c8d6137906bee357

deps: bump esbuild

view details

push time in a day

issue commentpikapkg/esm-hmr

Reference: Vite

Given there seem to be many undefined behavior differences between our implementations, I'm not sure if it's worth it to bend them to conform to the exact same spec. Even if we achieve syntactical consistency, there are probably more fundamental differences in terms of actual behavior.

yyx990803

comment created time in a day

issue commentpikapkg/esm-hmr

Reference: Vite

I guess the misunderstanding probably roots from the difference in our implementations... wouldn't this new instance of store.js register a new accept callback that replaces the previous one? It sounds to me you are always using the first accept callback that was registered? What if the user edits the accept callback itself?


Just to make sure I understand you 100%, in Vite does a change inside of modules/a.js in the example below trigger a full page reload, or is the change to modules/a.js considered accepted & fully handled by store.js?

Yes, it would be a full reload because foo.js has no defined behavior for when a.js and b.js are updated.

yyx990803

comment created time in a day

push eventvitejs/vite

Evan You

commit sha dd0205f321c57ad0b59813181591dafe1d8d3f90

fix: unset service when stopping esbuild service

view details

Evan You

commit sha df526b127e63ff2f52458ea796f9c813880a1a65

fix: only append import query if has no existing query

view details

Evan You

commit sha 43ccaf77e89ebf219c15aaf12b06a4632beb3968

perf: revert special handling for vue hmr this avoids full babel parse on every vue file

view details

push time in a day

push eventvitejs/vite

Evan You

commit sha 9503762e103f304228ceb7d572b17c24ed008501

feat: expose process.env.BASE_URL Keeps it consistent with vue-cli. BREAKING CHANGE: `__BASE__` special global has been removed. Use `process.env.BASE_URL` instead.

view details

Evan You

commit sha 319b37bbf4cef4804b56061ab5354d361c90dacb

feat: support referencing public dir files from root

view details

Evan You

commit sha ec7401f9f9c959851b220627f4be2355b7dd14c6

chore: only log extension resolve debug if actually resovled

view details

push time in a day

push eventvitejs/vite

Jian Zhang

commit sha 301d7a3b151a8fdefd09db0d742c7b6d0ce206db

fix: updateType may contains extra & (#260)

view details

push time in a day

PR merged vitejs/vite

fix: updateType may contains extra &
+9 -6

0 comment

1 changed file

dsonet

pr closed time in a day

issue commentvitejs/vite

CSS Module Options not working

My bad, fixed in 0ce1eef

khuyennguyen7007

comment created time in a day

push eventvitejs/vite

Evan You

commit sha 0ce1eef7bd77eb8468c8b9e6878c2a78167efc4f

fix: respect user configured css modules options for rollup-plugin-vue

view details

push time in a day

push eventvitejs/vite

Evan You

commit sha 86d2143e31cba594377da43116c161a87d2d1874

fix: default mode for build API usage

view details

push time in a day

push eventvitejs/vite

Evan You

commit sha a68bfc307dd636d5e1b5d42d6df248da1beea2ff

feat(hmr): re-design HMR API BREAKING CHANGE: HRM API has been re-designed. - All HMR APIs are now exposed on `import.meta.hot` and HMR API calls should be nested inside `if (import.meta.hot) {}` conditional checks. - `import.meta.hot.accept()` is now only used for self-accepting updates. - `import.meta.hot.acceptDeps()` is now used for accepting dependency updates without re-instantiating acceptor. - `import.meta.hot.data` is an object that is persisted across hot updates of a module. - `import.meta.hot.dispose()` callback now receives the persisted data object. - `import.meta.hot.decline()` can be used to decline updates and if the module is affected in an HMR update chain and force full page reload. - `import.meta.hot.invalidate()` can be used inside an acceptance callback to conditionally reject the update and force full page reload. See `hmr.d.ts` for full API definitions.

view details

push time in a day

issue commentpikapkg/esm-hmr

Reference: Vite

That example is actually fine as is: you would only want to update the current module's store and could ignore the newly created module instance's store.

On your next edit, the store in the callback will be a stale one, so future updates will have no effect.

The example using let binding should fix that, but is far less ergonomic than it could be.

How does data passing work with the dispose handler?

You don't - data passing is only relevant for self accepting modules that perform side effects on update. In this case, the deps modules (or reducers) should be side-effect free (and therefore is safe to be hot replaced)

Other dependents now have an outdated reference?

In Vite's implementation, we walk the import chains of any changed module - and only perform hot updates if all import chains reach a hot boundary. If there are any importer of the changed module (even up the chain) that is not a boundary (i.e. has no explicit logic to handle the update), the app will be reloaded in full. This guarantees there will never be stale references.

If you do not reload the page in full, then re-instantiating the self module with its deps doesn't really get rid of the stale reference problem. For example, if there is another file in your app that imports ./modules/a, it will get a stale reference regardless of whether store.js is re-instantiated.

yyx990803

comment created time in 2 days

issue commentpikapkg/esm-hmr

Reference: Vite

Based on what we've discussed here and the example here, when you are accepting deps, the self module should not be re-instantiated. This is necessary to preserve the identity of the exported store instance.

yyx990803

comment created time in 2 days

issue closedvuejs/vue-next

Boolean type mutates empty string as `true`

Version

3.0.0-beta.14

Reproduction link

https://jsfiddle.net/qg39x7rv/

Steps to reproduce

You should directly see the bug.

What is expected?

value: ""

What is actually happening?

value: true


When running with [Boolean, String], the default value '' is converted into true. If we change types to [String, Boolean], it works fine.

It makes me think about this weird behavior where

export default defineComponent({
  props: {
    value: { type: String, required: true },
  },
  setup(props: { value: string }) {},
});

works fine but

export default defineComponent({
  props: {
    value: { type: Boolean, required: true },
  },
  setup(props: { value: boolean }) {},
});

doesn't. I hence find myself writing Boolean as PropType<boolean> as a workaround

<!-- generated by vue-issues. DO NOT REMOVE -->

closed time in 2 days

PrettyWood

issue commentvuejs/vue-next

Boolean type mutates empty string as `true`

This is expected behavior. Empty string for Boolean props is casted to true, because when you write <Comp foo/>, the props are compiled into { foo: '' }.

Casting behavior also depends on the order of the type you specified.

PrettyWood

comment created time in 2 days

issue commentpikapkg/esm-hmr

Reference: Vite

accept(({ module, deps }) => {
  // deps is empty
})

accept(['./depA'], ({ module, deps }) => {
  // deps now non-empty
  // but do we really need module here if self module is not replaced in this case?
})

Compare to:

accept((selfModule) => {
})

acceptDeps(['./depA'], (depModules) => {
})

I guess personally for me it feels weird for an API method to be overloaded with different first argument and then you are expected to retrieve the relevant value from different properties under the object passed to a callback. I don't think I've come across many APIs designed like that before. If we want to be explicit, I would much prefer two API methods for self-accepting vs. accepting deps, since they are fundamentally doing different things.

yyx990803

comment created time in 2 days

issue commentpikapkg/esm-hmr

Reference: Vite

Even though the callback signature is the same, the values in the object being passed in changes based on the 1st argument. The deps key is only present when you pass an array of deps - which, IMO, isn't really that different from passing in different args to the callback.

Having two separate methods makes the intention clearer (it's easier to look at what method is being called than looking at the arguments), and also makes the usage less verbose.

yyx990803

comment created time in 2 days

issue commentpikapkg/esm-hmr

Reference: Vite

What do you think about

import.meta.hot.accept()
import.meta.hot.accept((selfModule) => {})
import.meta.hot.acceptDeps(['./depA', './depB'], ([depA, depB]) => {})
yyx990803

comment created time in 2 days

issue commentpikapkg/esm-hmr

Reference: Vite

we can essentially just support import.meta.hot.data as a recommended user-land pattern without doing anything on our end to specifically support it

I think the implementation still needs to ensure the same data object is persisted across reload of the same module.

yyx990803

comment created time in 2 days

push eventvitejs/vite

Evan You

commit sha 84fcfb66ecd9822ebb9dd56505332acce20da568

fix: fix rewrite extension appending for out of root files

view details

Evan You

commit sha a52ca5107ee1837a7d7efe430bc633ce376aa62e

chore: changelog [ci skip]

view details

Evan You

commit sha ca9592570b7e2bd5576fd5cd6c74b5501b2eee14

v0.16.12

view details

Evan You

commit sha edf90d380b7d6481650c8d4a6342667a0014bac4

feat: implement ESM-HMR API BREAKING CHANGE: The HMR API has been adjusted to use a tool-agnostic API as specified at https://github.com/pikapkg/esm-hmr

view details

Evan You

commit sha d1bb512f48bfa29855d79d82b92ec86b89ac88c8

refactor: move vue-specific hmr logic into serverPluginVue

view details

Evan You

commit sha 3a93c2b1f555e3a0d034600458b4d75b10f25da1

feat: import.meta.hot.data

view details

push time in 2 days

issue commentpikapkg/esm-hmr

Reference: Vite

This may come down to personal preference but I don't really see a problem here - accept is an overloaded function by design. If we really want to be explicit, then we should split it into multiple methods like hot.acceptSelf, hot.acceptDeps?

yyx990803

comment created time in 2 days

issue commentvitejs/vite

Issue with miragejs

Ok this is because you put miragejs under devDependencies but actually imports it in your code. Vite only pre-bundles dependencies under dependencies.

Uninen

comment created time in 2 days

issue commentpikapkg/esm-hmr

Reference: Vite

Follow up: based on webpack's implementation and https://github.com/rixo/rollup-plugin-hot - both attaches persisted data on the hot object. Is there any particular reason to pass it via a nested property instead?

If we simply access the persisted data via import.meta.hot.data (which additionally allows access outside of callbacks) - it gets rid of the need to pass data as an argument so the callback can expect only the updated module.

yyx990803

comment created time in 2 days

issue commentpikapkg/esm-hmr

Reference: Vite

So I noticed a few differences while looking at the latest spec, and I propose some slight syntax changes regarding the callback signature. Currently the spec requires accessing the reloaded module as a nested property on the object passed to the callback. This might make sense if the callback is accepting many different things, but in the context here there are really only two categories: the updated module(s), and the persisted data. Considering usage of data is rare, in most cases the callback really only need access to the updated modules. Having to destructure it from modules (and when using deps, under a different key deps) seems to bring no real benefits and result in a more verbose API.

Proposed Changes:

Self Accepting

// current spec
import.meta.hot.accept(({ module: { foo }, data }) => {
  // ...
})

// proposed change
import.meta.hot.accept(({ foo }, data) => {
  // ...
})

Deps

// current spec
import.meta.hot.accept(['./depA', './depB'], ({ deps: [depA, depB] }) => {
  // ...
})

// proposed change
import.meta.hot.accept(['./depA', './depB'], ([depA, depB]) => {
  // ...
})

In addition, the spec doesn't seem to support single dep via string:

// proposed addition, not currently covered in spec
import.meta.hot.accept('./depA', (newDepA) => {
  // ...
})
yyx990803

comment created time in 2 days

push eventvitejs/vite

Evan You

commit sha 0e00fdbe3201e6840b74290a4ad6bd968f2d2383

feat: implement ESM-HMR API BREAKING CHANGE: The HMR API has been adjusted to use a tool-agnostic API as specified at https://github.com/pikapkg/esm-hmr

view details

Evan You

commit sha 1c80fd7481aa43f4e035ab99debf637308d65833

refactor: move vue-specific hmr logic into serverPluginVue

view details

push time in 2 days

push eventvitejs/vite

Evan You

commit sha 4fceaea1b60ba71f954796dfc601e91300344d3f

fix: use upward search for env files

view details

push time in 2 days

push eventvitejs/vite

Evan You

commit sha 5589fa3ea51f5442083eb4a31844e23386c89af4

feat: support webp as static assets

view details

push time in 2 days

Pull request review commentvitejs/create-vite-app

feat: add react typescript template

+import React, { useState } from 'react'+import logo from './logo.svg'+import './App.css'++function App() {+  const [count, setCount] = useState(0)++  return (+    <div className="App">+      <header className="App-header">+        <img src={logo} className="App-logo" alt="logo" />+        <p>Hello Vite + React!</p>+        <p>+          <button onClick={() => setCount(count + 1)}>count is: {count}</button>+        </p>+        <p>+          Edit <code>App.jsx</code> and save to test HMR updates.
          Edit <code>App.tsx</code> and save to test HMR updates.
xiaoxiangmoe

comment created time in 2 days

Pull request review commentvitejs/create-vite-app

feat: add react typescript template

++/// <reference types="react" />+/// <reference types="react-dom" />++declare namespace NodeJS {+  interface ProcessEnv {+    readonly NODE_ENV: 'development' | 'production' | 'test'+  }+}++declare module '*.bmp' {

Vite doesn't support bmp. I don't think anyone should be using bmp in web projects nowadays.

xiaoxiangmoe

comment created time in 2 days

issue closedvitejs/vite

Slot content does not get updated when changed

Describe the bug

Slot content does not get updated when changed

Reproduction

https://github.com/nekosaur/vite-slot-bug

  1. yarn dev
  2. Open App.vue
  3. Edit Hello text and save
  4. Change is not reflected in browser until manually reloading page
  5. Changing the World text works

System Info

  • vite version: 0.16.10
  • vue version: 3.0.0-beta.14
  • Operating System: Windows 10
  • Node version: 12.14.1

closed time in 2 days

nekosaur

issue commentvitejs/vite

Slot content does not get updated when changed

It should've been fixed in the latest release (0.16.11)

nekosaur

comment created time in 2 days

push eventvitejs/vite

Evan You

commit sha 3fc05d54e4525ec51f38c5bad000292f9613f2fe

chore: changelog [ci skip]

view details

Evan You

commit sha 987843eae0984c6d0fe065dfcf14a475e81b7714

v0.16.11

view details

push time in 2 days

push eventvitejs/vite

Evan You

commit sha 146a49d78bd8225f846db8baa4adfa604d4cbf4a

fix: fix plain css reference via link (fix #252)

view details

push time in 2 days

issue closedvitejs/vite

responsed Content-Type is set incorrectly when using stylesheet in html file.

<!-- Before you continue...

If you just upgraded Vite and suddenly everything stops working, try opening the Network tab in your browser devtools, tick "disable cache" and refresh the page. -->

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

css files in <link rel tag responsed as application/javascript

css files in <link rel tag responsed as application/javascript, and the css content can not be loaded in bowser.

It's ok when using 0.15.3, but when using versions above this, the error occurs.

project dir as: image

html file as: image

warging info as: image

responsed info as: image

Reproduction

Please provide a link to a repo that can reproduce the problem you ran into.

A reproduction is required unless you are absolutely sure that the the problem is obvious and the information you provided is enough for us to understand what the problem is. If a report has only vague description (e.g. just a generic error message) and has no reproduction, it will be closed immediately.

System Info

  • required vite version: 0.16.10
  • required Operating System: win10@2004 + wsl2
  • required Node version: 13.9.0
  • Optional:
    • npm/yarn version: 6.13.7
    • Installed vue version (from yarn.lock or package-lock.json)
    • Installed @vue/compiler-sfc version

Logs (Optional if provided reproduction)

  1. Run vite or vite build with the --debug flag.
  2. Provide the error log here.

closed time in 2 days

beetaa

pull request commentvitejs/vite

feat: expose esbuild to transform

There might be a less intrusive way to handle this. Adding too many variables to the transform function feels weird.

csr632

comment created time in 2 days

issue closedvitejs/vite

Add Express middleware function for Vite server

Is your feature request related to a problem? Please describe. For simple projects I like to integrate the local dev server with the API server. I still use Express, and with Vite using Koa, it seems to require significant contortions to get the Vite server running within my Express app.

It's also not clear to me how to ensure my dev and prod serving logic are exactly the same (save for file watching and HMR, obviously). I'd love to use a Vite-supplied server for file serving in prod.

Describe the solution you'd like I particularly like how Nuxt offers a nuxt.render(req, res) function that can be used as an Express / Connect middleware function. It works great and is easy to integrate (from the Nuxt API docs):

const { loadNuxt, build } = require('nuxt')

const app = require('express')()
const isDev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000

async function start() {
  // We get Nuxt instance
  const nuxt = await loadNuxt(isDev ? 'dev' : 'start')

  // Render every route with Nuxt.js
  app.use(nuxt.render)

  // Build only in dev mode with hot-reloading
  if (isDev) {
    build(nuxt)
  }
  // Listen the server
  app.listen(port, '0.0.0.0')
  console.log('Server listening on `localhost:' + port + '`.')
}

start()

Similarly, Vite could offer expressRender(req, res, next), koaRender(ctx, next), etc methods. Here's one idea of what that could look like:

const { build, Server } = require('vite')

const app = require('express')()
const isDev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000
const viteConfig = require("../vite.config.js")

const viteServer = new Server(viteConfig)
app.use(viteServer.expressRender)

if (isDev) {
  build(viteConfig)
}

// Listen the server
app.listen(port, '0.0.0.0')
console.log('Server listening on `localhost:' + port + '`.')

Describe alternatives you've considered

  • I tried rewriting my Express modules in Koa, and it just feels like too much effort.
  • I wasn't able to find a koa-to-express adapter to embed the Vite dev server in my express app.
  • I wasn't sure how to use a proxy to "merge" the Vite server and my Express server.

closed time in 2 days

chriscalo

issue commentvitejs/vite

Add Express middleware function for Vite server

This is out of scope. See https://github.com/vkurchatkin/koa-connect

chriscalo

comment created time in 2 days

push eventvitejs/vite

Evan You

commit sha c239067969677bc09ad809baf02495072a38b2ff

fix: fix history fallback when serving non cwd root (fix #251)

view details

push time in 2 days

issue closedvitejs/vite

might be a bug for history api fallback with vite-plugin-react

Describe the bug

with vite-plugin-react and react template project, you must put same index.html file at /index.html and /src/index.html to make sure dev and build works fine.

Reproduction

see my vite playground with fluent-ui at https://github.com/undoZen/vite/tree/bbd2769e3d2b6d04aff15bc68d41f910ee58df0d/fluent-ui, this version works fine because I added a soft link index.html -> src/index.html, without it, dev server return 404 for /about, if I try to move src/index.html, dev server works fine but yarn build complains lack of src/index.html.

System Info

  • required vite version: 0.16.10
  • required Operating System: linux
  • required Node version: 12.latest

closed time in 2 days

undoZen

issue commentvitejs/vite

Resolving dependencies without entry point

I added more graceful handling of package with no main field (or non-existent main field) in the commit above, but that won't make your repro run because re-classnames ships code that uses CommonJS syntax.

I think overall Reason/BuckleScript ecosystem has some problematic integration practices with the npm ecosystem - e.g. declaring a main file that does not exist is simply wrong, and shipping non-ESM-compatible dist files is something Vite simply does not intend to support.

baransu

comment created time in 2 days

push eventvitejs/vite

Evan You

commit sha 8816d3bca6aef8df11f70f934031178accde5163

fix: more graceful handling for packages with no main field close #247

view details

push time in 2 days

issue closedvitejs/vite

Resolving dependencies without entry point

<!-- Before you continue...

If you just upgraded Vite and suddenly everything stops working, try opening the Network tab in your browser devtools, tick "disable cache" and refresh the page. -->

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

Currently, when resolving dependencies vite looks in package.json for module or entry, otherwise it fallbacks to index.js: https://github.com/vitejs/vite/blob/3f0aff9c58284e26637c480b6f6233c6cfae4c5f/src/node/resolver.ts#L245

This is problematic with BuckleScript compiled modules where ReasonML files are transpiled 1:1 into *.bs.js files without a single "entry" module. Later when using such a package in your application, paths point directly to the module you need without unnecessary reexports.

Right now vite throws an unhandled exception when trying to use such package when index.js is not found: https://github.com/vitejs/vite/blob/3f0aff9c58284e26637c480b6f6233c6cfae4c5f/src/node/depOptimizer.ts#L129

As I understand the solution would be to exclude those packages in vite.config.js but it can be tedious as none of the BuckleScript packages use entry point convention and there is no way to do it using the BuckleScript compiler (but it's outside of the scope of this issue).

Reproduction

System Info

  • required vite version: 0.16.10
  • required Operating System: macOS 10.15.4
  • required Node version: v10.16.3
  • Optional:
    • npm/yarn version
    • Installed vue version (from yarn.lock or package-lock.json)
    • Installed @vue/compiler-sfc version

Logs (Optional if provided reproduction)

  1. Run vite or vite build with the --debug flag.
  2. Provide the error log here.
vite:config config resolved in 169ms +0ms
vite:resolve (node_module entry) commons -> index.js +0ms
(node:87960) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/Users/baransu/Documents/monorepo/node_modules/commons/index.js'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at deps.filter (/Users/baransu/Documents/monorepo/node_modules/vite/dist/depOptimizer.js:95:44)
    at Array.filter (<anonymous>)
    at Object.optimizeDeps (/Users/baransu/Documents/monorepo/node_modules/vite/dist/depOptimizer.js:68:32)
(node:87960) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:87960) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

closed time in 2 days

baransu

issue closedvitejs/vite

Using a nested component inside a table breaks the table

Using a nested component inside a table breaks the table

Reproduction

https://github.com/gomezcabo/vite-tailwindcss-crud-example/blob/master/components/ItemsTable.vue#L25

When adding a class (e.g. <th class="px-6"> to that table row, the table gets broken. I'm not able to see why that is happening. It looks like the DOM elements are somehow not being renderer properly (e.g. the thead element dissapears)

No errors nor warnings in the browser console.

It happens on dev and build modes.

System Info

  • required vite version: 0.16.6
  • required Operating System: Ubuntu 16.04
  • required Node version: 10.19.0
  • Optional:
    • npm version: 6.13.4
    • yarn version: 1.12.3
    • Installed vue version: 3.0.0-beta.14
    • Installed @vue/compiler-sfc version: 3.0.0-beta.14

Logs (Optional if provided reproduction)

No warnings/errors.

closed time in 2 days

gomezcabo

issue commentvitejs/vite

Using a nested component inside a table breaks the table

This is a Vue 3 compiler issue - tracking in https://github.com/vuejs/vue-next/pull/1230 instead.

gomezcabo

comment created time in 2 days

issue commentvuejs/vue-next

Template direct field access

@RobbinBaauw this would require a fresh ctx object and spreading everything on every render - which comes with its own costs.

RobbinBaauw

comment created time in 2 days

issue commentvitejs/vite

Multi-page mode example

Regardless of SSR, multi-page is something Vite does plan to support.

chriscalo

comment created time in 2 days

push eventvitejs/vite

Evan You

commit sha 3486d2117faac0d83bc093f0c8c21b783b8f9f2d

fix: fix unused css filter check on windows

view details

push time in 2 days

push eventvitejs/vite

underfin

commit sha cf5de5b131beeab33eff942b288772f991112eea

refactor: vue update by hmr api (#243)

view details

push time in 2 days

PR merged vitejs/vite

refactor: vue update by hmr api

I do it because i think it is useful for let the logics with built-in vue process can be as an plugin.Well I think the hmr with vue module should be implement by hmr api, instead of use internal logic

Other

I find top boundary will update self when deps is changed.eg blew case.

hot.accpet('A',  'B', () => {} )

I think this bevaior should be handle by user self.vite don't do it because sometimes user don't hope A full-reload when B change. If the user want to do this bevaior.they can do like this blew.

hot.accpet('A',  'B', () => {
   import('A') // re-import A
} )

Or better way. we can add hmr bubble for not accpet deps.And accpet deps should not bubble.Like this blew.

// A
import 'B'
import 'C'
hot.accpet('A',  'B', () => {} )

A should not update when B changed.A should update when C change.

+100 -119

1 comment

6 changed files

underfin

pr closed time in 2 days

pull request commentvitejs/vite

refactor: vue update by hmr api

I think something is going on with appveyor, the fails seem unrelated.

underfin

comment created time in 2 days

push eventvitejs/vite

Day

commit sha db8b6b23d6e230505b48890cc95e0d8642e98804

feat: support specify env mode (#235)

view details

push time in 2 days

more