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 <vinicius.reis@nextcloud.com> Signed-off-by: Max <max@nextcloud.com>

Peer dependencies should be provided by the dependent package. Add them to our dev dependencies. Signed-off-by: Max <max@nextcloud.com>

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 <max@nextcloud.com>

Only list the package dependencies as dependencies in package.json. Other dependencies of the app are now listed in devDependencies. Signed-off-by: Max <max@nextcloud.com>

Signed-off-by: Max <max@nextcloud.com>

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 <max@nextcloud.com>

Signed-off-by: Max <max@nextcloud.com>

`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 <max@nextcloud.com>

`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 <max@nextcloud.com>

Be consistent with other uses of `RichText` and `PlainText`. Signed-off-by: Max <max@nextcloud.com>

Signed-off-by: Max <max@nextcloud.com>

* 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 <max@nextcloud.com>

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 <max@nextcloud.com>

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

/compile

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

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 juliusknorr and vinicius73 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 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 <vinicius.reis@nextcloud.com> Signed-off-by: Max <max@nextcloud.com>

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 <max@nextcloud.com>

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 <max@nextcloud.com>

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 <max@nextcloud.com>

package: 0.2.0-beta.3

a7d4864

Signed-off-by: Max <max@nextcloud.com>

ci: also compile package

53de932

Signed-off-by: Max <max@nextcloud.com>

fix: vite-plugin-vue2 is a dev dependency

72ab4bc

Signed-off-by: Max <max@nextcloud.com>

fix: package build use full filename in imports

e22bf8c

Signed-off-by: Max <max@nextcloud.com>

fix: try to keep editor from being reactive

f041ff1

Signed-off-by: Max <max@nextcloud.com>

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 <max@nextcloud.com>

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 <max@nextcloud.com>

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

eed9f8b

Be consistent with other uses of `RichText` and `PlainText`. Signed-off-by: Max <max@nextcloud.com>

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

9a8f761

Signed-off-by: Max <max@nextcloud.com>

refactor: BaseReader for shared code between Readers

36730c2

Signed-off-by: Max <max@nextcloud.com>

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 <nextcloud-command@users.noreply.github.com>

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

Closed

4 tasks

Build/use vite for package #2386

Build/use vite for package #2386

Uh oh!

Conversation

max-nextcloud commented May 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

juliusknorr commented May 12, 2022

Uh oh!

This comment was marked as resolved.

vinicius73 commented May 17, 2022

Uh oh!

vinicius73 commented May 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

max-nextcloud commented May 31, 2022

Uh oh!

Uh oh!

max-nextcloud commented May 31, 2022

Uh oh!

vinicius73 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

julien-nc left a comment

Choose a reason for hiding this comment

Uh oh!

max-nextcloud commented May 31, 2022

Uh oh!

max-nextcloud commented Jun 7, 2022

Uh oh!

juliusknorr left a comment

Choose a reason for hiding this comment

Uh oh!

max-nextcloud commented Jun 7, 2022

Uh oh!

max-nextcloud commented Jun 7, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

max-nextcloud commented May 12, 2022 •

edited

Loading

vinicius73 commented May 17, 2022 •

edited

Loading