Build/use vite for package #2386

max-nextcloud · 2022-05-12T07:59:50Z

Superseeds: WIP: split into src and package #2278
Target version: master

Summary

Use vite to build lib in dist folder. We can then package this lib.

Started out using rollup but turns out using vite is easier because it knows how to handle vue better.
This also provides the other benefits of vite when working on the package.

index.html embeds the ReadOnlyEditor and allows changing the content with an input field to try it out.

allow adding extensions to RichText extension via configuration
make extensions added that way overwrite the ones with the same name
use EditableTable in EditorWrapper
styles are missing in index.html
something is wrong with the source maps... cannot find file when trying to create breakpoints
need to change package.json to actually build something
need to try this out in collectives.

juliusknorr · 2022-05-12T09:04:23Z

Cool, I wasn't even aware that vite also has a library build target :)

vinicius73 · 2022-05-17T13:18:24Z

import path from path

path is a native node module, some polyfills enable us to use it in browser bundles, but it is a mistake. We should avoid the usage of native node modules.

I will try a small change for it.

vinicius73 · 2022-05-17T13:42:39Z

Webpack uses path-browserify as polyfill.
Changing to path-normalize we can remove this polyfill and make our package more "free transpiling" and smaller.

Refs.:

max-nextcloud · 2022-05-31T14:21:07Z

/compile

src/components/Reader.vue

max-nextcloud · 2022-05-31T14:29:21Z

/compile

vinicius73

I haven't tested yet, but looks very good. Thanks!

package.json

src/components/PlaintextReader.vue

src/components/RichtextReader.vue

julien-nc

Naive remark:
Using npm 7.24.2 and node v14.19.3, when running npm run dev:package or npm run build:package Vite complains about not finding the icons (which are there):

[vite]: Rollup failed to resolve import "vue-material-design-icons/Loading" from "src/components/icons.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "vue-material-design-icons/Loading" from "src/components/icons.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (/server25/apps/text/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:41489:19)
    at onwarn (/server25/apps/text/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:41305:13)
    at Object.onwarn (/server25/apps/text/node_modules/rollup/dist/shared/rollup.js:23202:13)
    at ModuleLoader.handleResolveId (/server25/apps/text/node_modules/rollup/dist/shared/rollup.js:22492:26)
    at /server25/apps/text/node_modules/rollup/dist/shared/rollup.js:22453:26

max-nextcloud · 2022-05-31T16:23:52Z

Using npm 7.24.2 and node v14.19.3, when running npm run dev:package or npm run build:package Vite complains about not finding the icons (which are there):

should be fixed.

Signed-off-by: Vinicius Reis <[email protected]> Signed-off-by: Max <[email protected]>

Peer dependencies should be provided by the dependent package. Add them to our dev dependencies. Signed-off-by: Max <[email protected]>

Add an `EditableTable` node that has all the buttons for changing the table. Use it in the Editor while keeping the plain `Table` in RichtextReader. Signed-off-by: Max <[email protected]>

Only list the package dependencies as dependencies in package.json. Other dependencies of the app are now listed in devDependencies. Signed-off-by: Max <[email protected]>

Signed-off-by: Max <[email protected]>

The app name `text` in appinfo and the package name `@nextcloud/text in package.json differ. webpack-vue-config reads the app name from package.json. But for bundling we need the one from appinfo. Can be removed after merge of nextcloud-libraries/webpack-vue-config#338 or a successor. Signed-off-by: Max <[email protected]>

Signed-off-by: Max <[email protected]>

`vite dev` loads all imports of a file. So better keep them separated. EditableTable is causing issues because @nextcloud/vue does not play nicely with vite yet. Signed-off-by: Max <[email protected]>

`vite dev` will load all imports in imported files. So for now it is better to not bundle multiple files in indexes. Signed-off-by: Max <[email protected]>

Be consistent with other uses of `RichText` and `PlainText`. Signed-off-by: Max <[email protected]>

Signed-off-by: Max <[email protected]>

* only import prosemirror css once. * disconnect after receiving a 409 response in polling backend. * clean up remains of `RichtextOptions`. * use the `isRichEditor` prop in Reader. * add cypress test for conflict display. Signed-off-by: Max <[email protected]>

max-nextcloud · 2022-06-07T19:45:03Z

/compile

juliusknorr

LGTM 👍

max-nextcloud · 2022-06-07T20:17:29Z

/compile

Tests were failing because cypress proceeded with adding files to a folder that had not been created yet: https://github.com/nextcloud/text/runs/6780248454?check_suite_focus=true Do not create the callout test directory twice. Nested cypress blocks will execute `beforeEach` on all levels. Signed-off-by: Max <[email protected]>

max-nextcloud · 2022-06-07T21:13:02Z

/compile

Signed-off-by: nextcloud-command <[email protected]>

max-nextcloud force-pushed the build/use-vite-for-package branch from 6bae498 to a19fec0 Compare May 12, 2022 10:25

max-nextcloud mentioned this pull request May 13, 2022

Build/use rollup for npm package #2384

Closed

max-nextcloud force-pushed the build/use-vite-for-package branch 3 times, most recently from 1389763 to 47e80cb Compare May 17, 2022 09:15

This comment was marked as resolved.

Sign in to view

max-nextcloud mentioned this pull request May 18, 2022

NPM packages for apps nextcloud/standards#3

Closed

max-nextcloud force-pushed the build/use-vite-for-package branch 2 times, most recently from e516807 to 27f328a Compare May 23, 2022 07:42

max-nextcloud marked this pull request as ready for review May 23, 2022 07:43

max-nextcloud requested review from vinicius73 and juliusknorr May 23, 2022 07:43

max-nextcloud marked this pull request as draft May 23, 2022 08:15

max-nextcloud force-pushed the build/use-vite-for-package branch 4 times, most recently from eae5dfd to 32e6afe Compare May 31, 2022 14:20

max-nextcloud marked this pull request as ready for review May 31, 2022 14:20

max-nextcloud requested a review from julien-nc May 31, 2022 14:23

vinicius73 reviewed May 31, 2022

View reviewed changes

src/components/Reader.vue Outdated Show resolved Hide resolved

max-nextcloud force-pushed the build/use-vite-for-package branch from 32e6afe to 7a605d0 Compare May 31, 2022 14:27

vinicius73 reviewed May 31, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

src/components/PlaintextReader.vue Outdated Show resolved Hide resolved

src/components/RichtextReader.vue Outdated Show resolved Hide resolved

max-nextcloud force-pushed the build/use-vite-for-package branch from eed60c9 to 06efee6 Compare May 31, 2022 14:37

julien-nc reviewed May 31, 2022

View reviewed changes

Vinicius Reis and others added 16 commits June 7, 2022 19:42

🐛 use path-normalize instead of node:path

8160c3c

Signed-off-by: Vinicius Reis <[email protected]> Signed-off-by: Max <[email protected]>

add peer dependencies of @nextcloud/webpack-vue-config

4afca43

Peer dependencies should be provided by the dependent package. Add them to our dev dependencies. Signed-off-by: Max <[email protected]>

fix: bring back table modification buttons

464adb2

Add an `EditableTable` node that has all the buttons for changing the table. Use it in the Editor while keeping the plain `Table` in RichtextReader. Signed-off-by: Max <[email protected]>

package: reduce dependencies where possible

9a498eb

Only list the package dependencies as dependencies in package.json. Other dependencies of the app are now listed in devDependencies. Signed-off-by: Max <[email protected]>

package: 0.2.0-beta.3

a7d4864

Signed-off-by: Max <[email protected]>

ci: also compile package

53de932

Signed-off-by: Max <[email protected]>

fix: vite-plugin-vue2 is a dev dependency

72ab4bc

Signed-off-by: Max <[email protected]>

fix: package build use full filename in imports

e22bf8c

Signed-off-by: Max <[email protected]>

fix: try to keep editor from being reactive

f041ff1

Signed-off-by: Max <[email protected]>

fix: split Table and EditableTable into independent files

741ae2c

`vite dev` loads all imports of a file. So better keep them separated. EditableTable is causing issues because @nextcloud/vue does not play nicely with vite yet. Signed-off-by: Max <[email protected]>

fix: remove nodes/index.js - import directly

77a499e

`vite dev` will load all imports in imported files. So for now it is better to not bundle multiple files in indexes. Signed-off-by: Max <[email protected]>

rename {Rich,Plain}textReader to {Rich,Plain}TextReader

eed9f8b

Be consistent with other uses of `RichText` and `PlainText`. Signed-off-by: Max <[email protected]>

vite: use vite-plugin-commonjs for vue-material-design-icons

9a8f761

Signed-off-by: Max <[email protected]>

refactor: BaseReader for shared code between Readers

36730c2

Signed-off-by: Max <[email protected]>

max-nextcloud force-pushed the build/use-vite-for-package branch from 44338f7 to b1ccb60 Compare June 7, 2022 18:24

juliusknorr approved these changes Jun 7, 2022

View reviewed changes

max-nextcloud force-pushed the build/use-vite-for-package branch from bdff106 to ab03ba3 Compare June 7, 2022 20:13

max-nextcloud force-pushed the build/use-vite-for-package branch from 0b686de to 6acb55c Compare June 7, 2022 21:05

max-nextcloud force-pushed the build/use-vite-for-package branch from 6acb55c to 0162bb0 Compare June 7, 2022 21:12

Compile assets

5dfe280

Signed-off-by: nextcloud-command <[email protected]>

max-nextcloud merged commit 2eac243 into master Jun 7, 2022

delete-merged-branch bot deleted the build/use-vite-for-package branch June 7, 2022 21:23

skjnldsv mentioned this pull request Nov 15, 2022

Single repository for app and related npm package nextcloud/standards#8

Open

max-nextcloud mentioned this pull request Feb 26, 2024

Get rid of postcss 7.x #5417

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build/use vite for package #2386

Build/use vite for package #2386

max-nextcloud commented May 12, 2022 •

edited

Loading

juliusknorr commented May 12, 2022

This comment was marked as resolved.

vinicius73 commented May 17, 2022

vinicius73 commented May 17, 2022 •

edited

Loading

max-nextcloud commented May 31, 2022

max-nextcloud commented May 31, 2022

vinicius73 left a comment

julien-nc left a comment

max-nextcloud commented May 31, 2022

max-nextcloud commented Jun 7, 2022

juliusknorr left a comment

max-nextcloud commented Jun 7, 2022

max-nextcloud commented Jun 7, 2022

Build/use vite for package #2386

Build/use vite for package #2386

Conversation

max-nextcloud commented May 12, 2022 • edited Loading

Summary

juliusknorr commented May 12, 2022

This comment was marked as resolved.

vinicius73 commented May 17, 2022

vinicius73 commented May 17, 2022 • edited Loading

max-nextcloud commented May 31, 2022

max-nextcloud commented May 31, 2022

vinicius73 left a comment

Choose a reason for hiding this comment

julien-nc left a comment

Choose a reason for hiding this comment

max-nextcloud commented May 31, 2022

max-nextcloud commented Jun 7, 2022

juliusknorr left a comment

Choose a reason for hiding this comment

max-nextcloud commented Jun 7, 2022

max-nextcloud commented Jun 7, 2022

max-nextcloud commented May 12, 2022 •

edited

Loading

vinicius73 commented May 17, 2022 •

edited

Loading