chore: Move to ESM package

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Dec 13, 2023 · 82810aa · 82810aa
1 parent 87fc04e
commit 82810aa
Show file tree

Hide file tree

Showing 16 changed files with 50 additions and 68 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,24 @@
+{
+ "globals": {
+ "EMOJIS": true,
+ "PRODUCTION": true,
+ "SCOPE_VERSION": true,
+ "TRANSLATIONS": true,
+ "oc_userconfig": true,
+ "appName": true,
+ "appVersion": true
+ },
+ "extends": [
+ "@nextcloud"
+ ],
+ "plugins": [
+ "cypress"
+ ],
+ "parserOptions": {
+ "babelOptions": {
+ "plugins": [
+ "@babel/plugin-syntax-import-assertions"
+ ]
+ }
+ }
+}
diff --git a/babel.config.js → babel.config.cjs b/babel.config.js → babel.config.cjs
diff --git a/build/extract-l10n.js b/build/extract-l10n.js
@@ -1,4 +1,4 @@
-const { GettextExtractor, JsExtractors, HtmlExtractors } = require('gettext-extractor')
+import { GettextExtractor, JsExtractors, HtmlExtractors } from 'gettext-extractor'
 
 const extractor = new GettextExtractor()
 

diff --git a/build/translations.js b/build/translations.js
@@ -20,16 +20,13 @@
  *
  */
 
+import { basename, join } from 'path'
+import { readdir, readFile } from 'fs/promises'
+import gettextParser from 'gettext-parser'
+
 // https://github.com/alexanderwallin/node-gettext#usage
 // https://github.com/alexanderwallin/node-gettext#load-and-add-translations-from-mo-or-po-files
 const parseFile = async (fileName) => {
- // We need to import dependencies dynamically to support this module to be imported by vite and to be required by Cypress
- // If we use require, vite will fail with 'Dynamic require of "path" is not supported'
- // If we convert it to an ES module, webpack and vite are fine but Cypress will fail because it can not handle ES imports in Typescript configs in commonjs packages
- const { basename } = await import('path')
- const { readFile } = await import('fs/promises')
- const gettextParser = await import('gettext-parser')
-
  const locale = basename(fileName).slice(0, -'.pot'.length)
  const po = await readFile(fileName)
 
@@ -59,9 +56,7 @@ const parseFile = async (fileName) => {
  }
 }
 
-const loadTranslations = async (baseDir) => {
- const { join } = await import('path')
- const { readdir } = await import('fs/promises')
+export const loadTranslations = async (baseDir) => {
  const files = await readdir(baseDir)
 
  const promises = files
@@ -71,7 +66,3 @@ const loadTranslations = async (baseDir) => {
 
  return Promise.all(promises)
 }
-
-module.exports = {
- loadTranslations,
-}
diff --git a/build/usernameToColor-export.js b/build/usernameToColor-export.js
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -7,7 +7,8 @@ import webpackRules from '@nextcloud/webpack-vue-config/rules.js'
 
 import { loadTranslations } from './build/translations.js'
 
-const SCOPE_VERSION = Date.now();
+const SCOPE_VERSION = Date.now()
+const __dirname = new URL('.', import.meta.url).pathname;
 
 (webpackRules.RULE_SCSS.use as webpack.RuleSetUse[]).push({
  loader: 'sass-loader',

diff --git a/jest.config.js → jest.config.cjs b/jest.config.js → jest.config.cjs
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
  "bugs": "https://github.com/nextcloud-libraries/nextcloud-vue/issues",
  "author": "John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>",
  "license": "AGPL-3.0",
+ "type": "module",
  "scripts": {
  "build": "vite build --mode production ",
  "dev": "vite build --mode development",
@@ -24,8 +25,8 @@
  "test:coverage": "TZ=UTC jest --verbose --coverage --no-cache",
  "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
  "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix",
- "styleguide": "vue-styleguidist server",
- "styleguide:build": "vue-styleguidist build",
+ "styleguide": "vue-styleguidist --config styleguide.config.cjs server",
+ "styleguide:build": "vue-styleguidist --config styleguide.config.cjs build",
  "cypress": "TZ=UTC cypress run --component",
  "cypress:gui": "TZ=UTC cypress open --component",
  "cypress:update-snapshots": "TZ=UTC cypress run --component --spec \"cypress/visual/**/*.cy.{t,j}s\" --env type=base --config screenshotsFolder=cypress/snapshots/base"
@@ -142,10 +143,10 @@
  "node-polyfill-webpack-plugin": "^3.0.0",
  "resolve-url-loader": "^5.0.0",
  "sanitize-filename": "^1.6.3",
- "ts-node": "^10.9.1",
+ "ts-node": "^10.9.2",
  "typescript": "^5.0.4",
  "url-loader": "^4.1.1",
- "vite": "^4.3.9",
+ "vite": "^4.5.0",
  "vue-eslint-parser": "^9.0.3",
  "vue-material-design-icons": "^5.2.0",
  "vue-router": "^3.6.5",

diff --git a/styleguide.config.js → styleguide.config.cjs b/styleguide.config.js → styleguide.config.cjs
@@ -1,6 +1,6 @@
 const path = require('path')
 const { merge } = require('webpack-merge')
-const webpackConfig = require('./webpack.config.js')
+const webpackConfig = require('./webpack.config.cjs')
 
 module.exports = async () => {
  const base = await webpackConfig()

diff --git a/styleguide/global.requires.js b/styleguide/global.requires.js
@@ -1,7 +1,7 @@
-/* eslint-disable-next-line */
-import 'core-js/stable'
-/* eslint-disable-next-line */
-import 'regenerator-runtime/runtime'
+// eslint-disable-next-line n/no-extraneous-import
+import 'core-js/stable/index.js'
+// eslint-disable-next-line n/no-extraneous-import
+import 'regenerator-runtime/runtime.js'
 import Vue from 'vue'
 import VTooltip from './../src/directives/Tooltip/index.js'
 

diff --git a/stylelint.config.js → stylelint.config.cjs b/stylelint.config.js → stylelint.config.cjs
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,5 @@
 {
- "extends": "@vue/tsconfig",
+ "extends": "@vue/tsconfig/tsconfig.json",
  "include": ["./src/**/*.ts"],
  "exclude": ["./src/**/*.cy.ts"],
  "compilerOptions": {

diff --git a/vite.config.mts → vite.config.ts b/vite.config.mts → vite.config.ts
@@ -5,13 +5,9 @@ import { join, resolve } from 'node:path'
 import { defineConfig } from 'vite'
 
 import md5 from 'md5'
-import * as url from 'url'
 
 import { loadTranslations } from './build/translations.js'
 
-// `__dirname` not available on ES modules by default
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
-
 const appVersion = JSON.stringify(process.env.npm_package_version || 'nextcloud-vue')
 const SCOPE_VERSION = md5(appVersion).slice(0, 7) as string
 const TRANSLATIONS = await loadTranslations(resolve(__dirname, './l10n'))

diff --git a/webpack.config.js → webpack.config.cjs b/webpack.config.js → webpack.config.cjs
@@ -8,7 +8,6 @@ const path = require('path')
 
 const { DefinePlugin } = require('webpack')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
-const { loadTranslations } = require('./build/translations.js')
 
 const buildMode = process.env.NODE_ENV
 const isDev = buildMode === 'development'
@@ -68,6 +67,7 @@ webpackRules.RULE_NODE_MJS = {
 webpackConfig.module.rules = Object.values(webpackRules)
 
 module.exports = async () => {
+ const { loadTranslations } = await import('./build/translations.js')
  const translations = await loadTranslations(path.resolve(__dirname, './l10n'))
 
  webpackConfig.plugins.push(new DefinePlugin({