Enables ESM Modules

cypress/plugins/index.js

@@ -16,17 +16,17 @@ const getCompareSnapshotsPlugin = require('cypress-visual-regression/dist/plugin
 const webpack = require('@cypress/webpack-preprocessor')
 const { startDevServer } = require('@cypress/webpack-dev-server')
 
-const webpackOptions = require('../../webpack.config.js')
-webpackOptions.externals = {}
-
-const options = {
-	// send in the options from your webpack.config.js, so it works the same
-	// as your app's code
-	webpackOptions,
-	watchOptions: {},
-}
+module.exports = async (on, config) => {
+	const webpackOptions = await require('../../webpack.config.js')()
+	webpackOptions.externals = {}
+
+	const options = {
+		// send in the options from your webpack.config.js, so it works the same
+		// as your app's code
+		webpackOptions,
+		watchOptions: {},
+	}
 
-module.exports = (on, config) => {
 	getCompareSnapshotsPlugin(on, config)
 	on('file:preprocessor', webpack(options))
 

package.json

@@ -15,7 +15,8 @@
 	"scripts": {
 		"dev": "webpack --node-env development --progress",
 		"watch": "webpack --node-env development --progress --watch",
-		"build": "webpack --node-env production --progress",
+		"build": "webpack --node-env production --progress && npm run build:module",
+		"build:module": "LIBRARY_TARGET=module webpack --node-env production --progress",
 		"l10n:extract": "node build/extract-l10n.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
@@ -30,6 +31,7 @@
 		"cypress:update-snapshots": "cypress run-ct --env type=base --config screenshotsFolder=cypress/snapshots/base"
 	},
 	"main": "dist/ncvuecomponents.js",
+	"module": "dist/index.module.js",
 	"files": [
 		"CHANGELOG.md",
 		"LICENSE",

resources/translations.js

@@ -0,0 +1,71 @@
+/**
+ * @copyright Copyright (c) 2022 Vinicius Reis <[email protected]>
+ *
+ * @author Vinicius Reis <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const { join, basename } = require('path')
+const fs = require('fs/promises')
+const gettextParser = require('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) => {
+	const locale = basename(fileName).slice(0, -'.pot'.length)
+	const po = await fs.readFile(fileName)
+
+	const json = gettextParser.po.parse(po)
+
+	// Compress translations Content
+	const translations = {}
+	for (const key in json.translations['']) {
+		if (key !== '') {
+			// Plural
+			if ('msgid_plural' in json.translations[''][key]) {
+				translations[json.translations[''][key].msgid] = {
+					pluralId: json.translations[''][key].msgid_plural,
+					msgstr: json.translations[''][key].msgstr,
+				}
+				continue
+			}
+
+			// Singular
+			translations[json.translations[''][key].msgid] = json.translations[''][key].msgstr[0]
+		}
+	}
+
+	return {
+		locale,
+		translations,
+	}
+}
+
+const loadTranslations = async (baseDir) => {
+	const files = await fs.readdir(baseDir)
+
+	const promises = files
+		.filter(name => name !== 'messages.pot' && name.endsWith('.pot'))
+		.map(file => join(baseDir, file))
+		.map(parseFile)
+
+	return Promise.all(promises)
+}
+
+module.exports = {
+	loadTranslations,
+}

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -147,7 +147,7 @@ import { t } from '../../l10n.js'
 import NcAutoCompleteResult from './NcAutoCompleteResult.vue'
 import richEditor from '../../mixins/richEditor/index.js'
 import Tooltip from '../../directives/Tooltip/index.js'
-import { emojiSearch, addRecent } from '../../functions/emoji/index.js'
+import { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.js'
 
 import Tribute from 'tributejs/dist/tribute.esm.js'
 import debounce from 'debounce'
@@ -265,7 +265,7 @@ export default {
 				noMatchTemplate: () => t('No emoji found'),
 				// Display raw emoji along with its name
 				selectTemplate: (item) => {
-					addRecent(item.original)
+					emojiAddRecent(item.original)
 					return item.original.native
 				},
 				// Pass the search results as values

src/components/index.js

@@ -76,3 +76,4 @@ export { default as NcSettingsSection } from './NcSettingsSection/index.js'
 export { default as NcTextField } from './NcTextField/index.js'
 export { default as NcUserBubble } from './NcUserBubble/index.js'
 export { default as NcRelatedResourcesPanel } from './NcRelatedResourcesPanel/index.js'
+export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'

src/functions/emoji/emoji.js

@@ -39,8 +39,8 @@ export const emojiSearch = function(query, maxResults = 10) {
 	return frequently.get(maxResults).map((id) => index.emoji(id)) || []
 }
 
-export const addRecent = function(id) {
+export const emojiAddRecent = function(id) {
 	frequently.add(id)
 }
 
-export default { emojiSearch, addRecent }
+export default { emojiSearch, emojiAddRecent }

src/functions/emoji/index.js

@@ -20,6 +20,6 @@
  *
  */
 
-import { emojiSearch, addRecent } from './emoji.js'
+import { emojiSearch, emojiAddRecent } from './emoji.js'
 
-export { emojiSearch, addRecent }
+export { emojiSearch, emojiAddRecent }

src/functions/index.js

@@ -0,0 +1,2 @@
+export * from './emoji/index.js'
+export { default as usernameToColor } from './usernameToColor/index.js'

src/index.js

@@ -19,26 +19,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import * as NcComponents from './components/index.js'
 
-/**
- * @param {object} Vue The vue instance
- */
-function install(Vue) {
-	Object.values(NcComponents).forEach((component) => {
-		Vue.component(component.name, component)
-	})
-}
-
-if (typeof window !== 'undefined' && window.Vue) {
-	install(window.Vue)
-}
-
-export default {
-	install,
-	...NcComponents,
-}
 export * from './components/index.js'
+export * from './functions/index.js'
 export * from './directives/index.js'
 export * from './mixins/index.js'
 export * from './a11y/index.js'

src/install.js

@@ -0,0 +1,16 @@
+import * as NcComponents from './components/index.js'
+
+/**
+ * @param {object} Vue The vue instance
+ */
+function install(Vue) {
+	Object.values(NcComponents).forEach((component) => {
+		Vue.component(component.name, component)
+	})
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+	install(window.Vue)
+}
+
+export default install