perf: Switch to vite for bundling

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Imports

Signed-off-by: Julius Härtl <jus@bitgrid.net>

chore: Move to new file picker api for esm compatibility

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Make CI pass

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Update file picker usage

Signed-off-by: Julius Härtl <jus@bitgrid.net>

ci: Fix cypress

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix file picker

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix cypress

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Proper css for all entrypoints

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Properly load styles

Signed-off-by: Julius Härtl <jus@bitgrid.net>

.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
 	root: true,
 	extends: [
 		'@nextcloud',
+		'@nextcloud/eslint-config/typescript',
 	],
 	rules: {
 		'jsdoc/require-jsdoc': 'off',

lib/Controller/PageController.php

@@ -43,6 +43,7 @@ class PageController extends Controller {
 		Util::addStyle(Application::APP_ID, 'grid');
 		Util::addStyle(Application::APP_ID, 'modal');
 		Util::addStyle(Application::APP_ID, 'tiptap');
+		Util::addStyle(Application::APP_ID, 'tables-style');
 
 		if (class_exists(LoadViewer::class)) {
 			$this->eventDispatcher->dispatchTyped(new LoadViewer());

package.json

@@ -10,14 +10,14 @@
     "url": "https://github.com/nextcloud/tables",
     "type": "git"
   },
+  "type": "module",
   "url": "https://github.com/nextcloud/tables/wiki",
   "license": "agpl",
   "private": true,
   "scripts": {
-    "build": "NODE_ENV=production webpack --progress --config webpack.config.js",
-    "dev": "NODE_ENV=development webpack --progress --config webpack.config.js",
-    "watch": "NODE_ENV=development webpack --progress --watch --config webpack.config.js",
-    "serve": "NODE_ENV=development webpack serve --progress --config webpack.config.js",
+    "build": "vite --mode production build",
+    "dev": "vite --mode development build",
+    "watch": "vite --mode development build --watch",
     "typescript:check": "tsc --noEmit",
     "typescript:generate": "npx openapi-typescript ./openapi.json --immutable -t -o src/types/openapi/openapi.ts",
     "lint": "eslint --ext .js,.vue src",
@@ -67,6 +67,12 @@
     "@nextcloud/webpack-vue-config": "^6.3.0",
     "cypress": "^13.6.4",
     "cypress-downloadfile": "^1.2.4",
-    "openapi-typescript": "^7.8.0"
+    "openapi-typescript": "^7.6.1",
+    "@nextcloud/vite-config": "^1.2.2",
+    "@vue/tsconfig": "^0.5.1",
+    "typescript": "^5.3.3"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.10.0"
   }
 }

src/App.vue

@@ -48,7 +48,7 @@ export default {
 		...mapState(useTablesStore, ['isLoadingSomething', 'activeView', 'activeTable', 'activeContext']),
 	},
 	watch: {
-		'$route'(to, from) {
+		'$route'(to) {
 			this.routing(to)
 		},
 	},

src/file-actions.js

@@ -7,8 +7,7 @@ import { spawnDialog } from '@nextcloud/dialogs'
 // eslint-disable-next-line import/no-unresolved
 import tablesIcon from '@mdi/svg/svg/table-large.svg?raw'
 
-__webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
-__webpack_public_path__ = OC.linkTo('tables', 'js/') // eslint-disable-line
+import '@nextcloud/dialogs/style.css'
 
 const validMimeTypes = [
 	'text/csv',

src/main.js

@@ -10,10 +10,6 @@ import router from './router.js'
 import VuePapaParse from 'vue-papa-parse'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
-__webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
-// eslint-disable-next-line
-__webpack_public_path__ = generateFilePath('tables', '', 'js/')
-
 Vue.mixin({ methods: { t, n } })
 Vue.use(PiniaVuePlugin)
 const pinia = createPinia()

src/modules/main/partials/ColumnFormComponent.vue

@@ -70,7 +70,7 @@ export default {
 		},
 	},
 	watch: {
-		value_data(val) {
+		value_data() {
 			this.$emit('update:value', this.value_data)
 		},
 		value() {

src/modules/navigation/partials/NavigationTableItem.vue

@@ -136,12 +136,12 @@
 				{{ t('tables', 'Delete table') }}
 			</NcActionButton>
 		</template>
-		<div>
+		<ul>
 			<NavigationViewItem v-for="view in getViews"
 				:key="'view'+view.id"
 				:view="view"
 				:show-share-sender="false" />
-		</div>
+		</ul>
 	</NcAppNavigationItem>
 </template>
 

src/pages/Context.vue

@@ -45,7 +45,7 @@ import { NcIconSvgWrapper } from '@nextcloud/vue'
 import TableWrapper from '../modules/main/sections/TableWrapper.vue'
 import CustomView from '../modules/main/sections/View.vue'
 import { emit } from '@nextcloud/event-bus'
-import { NODE_TYPE_TABLE, NODE_TYPE_VIEW } from '../shared/constants.js'
+import { NODE_TYPE_TABLE, NODE_TYPE_VIEW } from '../shared/constants.ts'
 import exportTableMixin from '../shared/components/ncTable/mixins/exportTableMixin.js'
 import svgHelper from '../shared/components/ncIconPicker/mixins/svgHelper.js'
 import { useTablesStore } from '../store/store.js'

src/reference.js

@@ -4,9 +4,6 @@
  */
 import { registerCustomPickerElement, registerWidget, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Functions/registerReference.js'
 
-__webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
-__webpack_public_path__ = OC.linkTo('tables', 'js/') // eslint-disable-line
-
 registerWidget('tables_link', async (el, { richObjectType, richObject, accessible }) => {
 	const { default: Vue } = await import('vue')
 	const { default: TableReferenceWidget } = await import('./views/LinkReferenceWidget.vue')

src/shared/assets/icons/IconTables.vue

@@ -20,8 +20,10 @@
 	</span>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
 	name: 'IconTables',
 	props: {
 		title: {
@@ -37,5 +39,5 @@ export default {
 			default: 24,
 		},
 	},
-}
+})
 </script>

src/shared/components/ncContextResource/mixins/permissionBitmask.js

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import { PERMISSION_READ, PERMISSION_CREATE, PERMISSION_UPDATE, PERMISSION_DELETE } from '../../../constants.js'
+import { PERMISSION_READ, PERMISSION_CREATE, PERMISSION_UPDATE, PERMISSION_DELETE } from '../../../constants.ts'
 
 export default {
 	data() {

src/shared/components/ncTable/mixins/columnsTypes/datetime.js

@@ -9,7 +9,7 @@ import { FilterIds } from '../filter.js'
 import {
 	TYPE_META_CREATED_AT,
 	TYPE_META_UPDATED_AT,
-} from '../../../../constants.js'
+} from '../../../../constants.ts'
 
 export default class DatetimeColumn extends AbstractDatetimeColumn {
 

src/shared/components/ncTable/mixins/columnsTypes/number.js

@@ -5,7 +5,7 @@
 import { AbstractNumberColumn } from '../columnClass.js'
 import { ColumnTypes } from '../columnHandler.js'
 import { FilterIds } from '../filter.js'
-import { TYPE_META_ID } from '../../../../constants.js'
+import { TYPE_META_ID } from '../../../../constants.ts'
 
 export default class NumberColumn extends AbstractNumberColumn {
 

src/shared/components/ncTable/mixins/columnsTypes/textLine.js

@@ -5,7 +5,7 @@
 import { AbstractTextColumn } from '../columnClass.js'
 import { ColumnTypes } from '../columnHandler.js'
 import { FilterIds } from '../filter.js'
-import { TYPE_META_CREATED_BY, TYPE_META_UPDATED_BY } from '../../../../constants.js'
+import { TYPE_META_CREATED_BY, TYPE_META_UPDATED_BY } from '../../../../constants.ts'
 
 export default class TextLineColumn extends AbstractTextColumn {
 

src/shared/components/ncTable/mixins/exportTableMixin.js

@@ -6,7 +6,7 @@ import moment from '@nextcloud/moment'
 import generalHelper from '../../../mixins/generalHelper.js'
 import {
 	TYPE_META_ID, TYPE_META_CREATED_BY, TYPE_META_CREATED_AT, TYPE_META_UPDATED_BY, TYPE_META_UPDATED_AT,
-} from '../../../../shared/constants.js'
+} from '../../../../shared/constants.ts'
 
 export default {
 

src/shared/components/ncTable/mixins/metaColumns.js

@@ -12,7 +12,7 @@ import {
 	TYPE_META_ID,
 	TYPE_META_UPDATED_AT,
 	TYPE_META_UPDATED_BY,
-} from '../../../constants.js'
+} from '../../../constants.ts'
 
 export const MetaColumns = [
 	new NumberColumn({ id: TYPE_META_ID, title: t('tables', 'ID') }),

src/shared/components/ncTable/partials/TableRow.vue

@@ -42,7 +42,7 @@ import { ColumnTypes } from './../mixins/columnHandler.js'
 import { translate as t } from '@nextcloud/l10n'
 import {
 	TYPE_META_ID, TYPE_META_CREATED_BY, TYPE_META_CREATED_AT, TYPE_META_UPDATED_BY, TYPE_META_UPDATED_AT,
-} from '../../../../shared/constants.js'
+} from '../../../../shared/constants.ts'
 
 export default {
 	name: 'TableRow',

src/shared/components/ncTable/sections/CustomTable.vue

@@ -85,7 +85,7 @@ import { NcButton, useIsMobile, NcSelect } from '@nextcloud/vue'
 import { mapState } from 'pinia'
 import {
 	TYPE_META_ID, TYPE_META_CREATED_BY, TYPE_META_CREATED_AT, TYPE_META_UPDATED_BY, TYPE_META_UPDATED_AT,
-} from '../../../../shared/constants.js'
+} from '../../../../shared/constants.ts'
 import { MetaColumns } from '../mixins/metaColumns.js'
 import { translate as t } from '@nextcloud/l10n'
 import { useTablesStore } from '../../../../store/store.js'

src/store/api.ts

@@ -0,0 +1,13 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+import type { getTablesResponse } from '../types/index.ts'
+
+export const listTables = async (): Promise<getTablesResponse> => {
+	return axios.get(generateUrl('/apps/tables/table'))
+}

src/views/SmartPicker.vue

@@ -72,8 +72,6 @@ import IconLink from 'vue-material-design-icons/Link.vue'
 import IconText from 'vue-material-design-icons/Text.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import { generateUrl } from '@nextcloud/router'
-import LinkReferenceWidget from './LinkReferenceWidget.vue'
-import ContentReferenceWidget from './ContentReferenceWidget.vue'
 import axios from '@nextcloud/axios'
 import displayError from '../shared/utils/displayError.js'
 import { useTablesStore } from '../store/store.js'
@@ -89,8 +87,8 @@ export default {
 		Search,
 		NcCheckboxRadioSwitch,
 		NcButton,
-		LinkReferenceWidget,
-		ContentReferenceWidget,
+		LinkReferenceWidget: import('./LinkReferenceWidget.vue'),
+		ContentReferenceWidget: import('./ContentReferenceWidget.vue'),
 		NcLoadingIcon,
 	},
 

tsconfig.json

@@ -7,9 +7,23 @@
 		"allowJs": true,
 		"checkJs": true,
 		"allowImportingTsExtensions": true,
-		"lib": ["ESNext"],
+		"allowSyntheticDefaultImports": true,
+		"declaration": true,
+		"esModuleInterop": true,
+		"lib": ["DOM", "ESNext"],
+		"noEmit": true,
+		"plugins": [
+			{ "name": "typescript-plugin-css-modules" }
+		],
+		"sourceMap": true
 	},
 	"vueCompilerOptions": {
 		"target": 2.7,
+	},
+	"ts-node": {
+		"compilerOptions": {
+			"module": "ESNext",
+			"moduleResolution": "Node"
+		}
 	}
 }

vite.config.ts

@@ -0,0 +1,29 @@
+// SPDX-FileCopyrightText: Ferdinand Thiessen <opensource@fthiessen.de>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { createAppConfig } from '@nextcloud/vite-config'
+import path from 'path'
+
+const config = createAppConfig({
+	reference: path.join(__dirname, 'src', 'reference.js'),
+	files: path.join(__dirname, 'src', 'file-actions.js'),
+	main: path.join(__dirname, 'src', 'main.js'),
+}, {
+	inlineCSS: true,
+	config: {
+		build: {
+			cssCodeSplit: false,
+			rollupOptions: {
+				output: {
+					manualChunks: (id) => {
+						if (id.includes('img/material/')) {
+							return 'material-icons'
+						}
+					},
+				},
+			},
+		},
+	},
+})
+
+export default config