isaul32#46 Convert to DLL compatible plugin

DanielKulbe · Feb 6, 2023 · a435ce3 · a435ce3
1 parent dc0286a
commit a435ce3
Show file tree

Hide file tree

Showing 30 changed files with 1,995 additions and 2,838 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -7,3 +7,10 @@ charset = utf-8
 end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.{js,jsx,ts}]
+quote_type = single
+
+[package.json]
+indent_style = space
+tab_width = 4
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,9 +4,34 @@
 
 module.exports = {
 	extends: 'ckeditor5',
+	root: true,
 	globals: {
 		'MathJax': true,
 		'katex': true,
 		'console': true
-	}
+	},
+	ignorePatterns: [
+		// Ignore the entire `build/` (the DLL build).
+		'build/**'
+	],
+	rules: {
+		// This rule disallows importing core DLL packages directly. Imports should be done using the `ckeditor5` package.
+		// Also, importing non-DLL packages is not allowed. If the package requires other features to work, they should be
+		// specified as soft-requirements.
+		// Read more: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-26.html#soft-requirements.
+		'ckeditor5-rules/ckeditor-imports': 'error',
+
+		// This rule could not be found ???
+		'ckeditor5-rules/use-require-for-debug-mode-imports': 'off'
+	},
+	overrides: [
+		{
+			files: [ 'tests/**/*.js', 'sample/**/*.js' ],
+			rules: {
+				// To write complex tests, you may need to import files that are not exported in DLL files by default.
+				// Hence, imports CKEditor 5 packages in test files are not checked.
+				'ckeditor5-rules/ckeditor-imports': 'off'
+			}
+		}
+	]
 };
diff --git a/.gitattributes b/.gitattributes
@@ -1 +1,18 @@
-* text=auto
+*			text=auto
+
+*.htaccess	eol=lf
+*.cgi		eol=lf
+*.sh		eol=lf
+
+*.css		text
+*.htm		text
+*.html		text
+*.js		text
+*.json		text
+*.php		text
+*.txt		text
+*.md		text
+
+*.png		-text
+*.gif		-text
+*.jpg		-text
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 node_modules/
 build/
+tmp/
+sample/ckeditor.dist.js
 package-lock.json
 yarn-error.log
-public
diff --git a/README.md b/README.md
@@ -60,8 +60,8 @@ If you get duplicated modules error, you have mismatching versions.
 
 Use official classic or inline build as a base:
 
--   [CKEditor 5 classic editor build](https://github.com/ckeditor/ckeditor5-build-classic)
--   [CKEditor 5 inline editor build](https://github.com/ckeditor/ckeditor5-build-inline)
+-   [CKEditor 5 classic editor build](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-classic)
+-   [CKEditor 5 inline editor build](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-inline)
 
 Install plugin with NPM or Yarn
 
@@ -72,15 +72,17 @@ Install plugin with NPM or Yarn
 Add import into ckeditor.js file
 
 ```js
-import Mathematics from 'ckeditor5-math/src/math';
+import Math from 'ckeditor5-math/src/math';
+import AutoformatMath from 'ckeditor5-math/src/autoformatmath';
 ```
 
 Add it to built-in plugins
 
 ```js
 InlineEditor.builtinPlugins = [
 	// ...
-	Mathematics
+	Math,
+	AutoformatMath
 ];
 ```
 
@@ -101,6 +103,24 @@ InlineEditor.defaultConfig = {
 
 **Copy theme/ckeditor5-math folder** from [https://github.com/isaul32/ckeditor5/tree/master/packages/ckeditor5-theme-lark](https://github.com/isaul32/ckeditor5/tree/master/packages/ckeditor5-theme-lark) to your lark theme repository
 
+### Using DLL builds
+
+Use the [official DLL build](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/dll-builds.html) and additionally load the math plugin:
+
+```html
+<script src="path/to/node_modules/isaul32/ckeditor5-math/build/math.js"></script>
+<script>
+CKEditor5.editorClassic.ClassicEditor
+	.create(editorElement, {
+		plugins: [
+			CKEditor5.math.Math,
+			...
+		],
+		...
+	});
+</script>
+```
+
 ## Configuration & Usage
 
 ### Plugin options
@@ -216,14 +236,30 @@ Add following lines into your build
 
 ```js
 // ...
-import AutoformatMathematics from 'ckeditor5-math/src/autoformatmath';
+import AutoformatMath from 'ckeditor5-math/src/autoformatmath';
 
 InlineEditor.builtinPlugins = [
 	// ...
-	AutoformatMathematics
+	AutoformatMath
 ];
 ```
 
+or use it with DLL build
+
+```html
+<script src="path/to/node_modules/isaul32/ckeditor5-math/build/math.js"></script>
+<script>
+CKEditor5.editorInline.InlineEditorEditor
+	.create(editorElement, {
+		plugins: [
+			CKEditor5.math.AutoformatMath,
+			...
+		],
+		...
+	});
+</script>
+```
+
 ## Preview workaround
 
 `.ck-reset_all *` css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.

diff --git a/ckeditor5-metadata.json b/ckeditor5-metadata.json
@@ -0,0 +1,23 @@
+{
+	"plugins": [
+		{
+			"name": "Math",
+			"className": "Math",
+			"description": "Adds mathematical formulars to the editor.",
+			"path": "src/math.js",
+			"uiComponents": [
+				{
+					"name": "math",
+					"type": "Button",
+					"iconPath": "theme/icons/math.svg"
+				}
+			]
+		},
+		{
+			"name": "AutoformatMath",
+			"className": "AutoformatMath",
+			"description": "Implements autoformatting with mathematical formulas.",
+			"path": "src/autoformatmath.js"
+		}
+	]
+}
diff --git a/demo/app.js b/demo/app.js
diff --git a/demo/index.html b/demo/index.html
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ckeditor5-math",
+  "name": "@isaul32/ckeditor5-math",
   "version": "36.0.0",
   "description": "Math feature for CKEditor 5.",
   "keywords": [
@@ -11,41 +11,37 @@
     "ckeditor5-math",
 	"katex"
   ],
-  "resolutions": {
-    "postcss-loader": "^4.3.0",
-    "mini-css-extract-plugin": "2.4.2"
-  },
+  "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "^36.0.0",
-    "@ckeditor/ckeditor5-core": "^36.0.0",
-    "@ckeditor/ckeditor5-engine": "^36.0.0",
-    "@ckeditor/ckeditor5-inspector": "^3.0.0",
-    "@ckeditor/ckeditor5-ui": "^36.0.0",
-    "@ckeditor/ckeditor5-undo": "^36.0.0",
-    "@ckeditor/ckeditor5-utils": "^36.0.0",
-    "@ckeditor/ckeditor5-widget": "^36.0.0"
+    "ckeditor5": "^36.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^36.0.0",
-    "@ckeditor/ckeditor5-dev-tests": "^30.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^36.0.0",
-    "@ckeditor/ckeditor5-editor-inline": "^36.0.0",
-    "@ckeditor/ckeditor5-essentials": "^36.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^36.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^36.0.0",
-    "css-loader": "^5.2.7",
-    "eslint": "^7.1.0",
-    "eslint-config-ckeditor5": "^3.1.1",
-    "html-webpack-plugin": "^5.3.1",
+    "@ckeditor/ckeditor5-autoformat": ">=36.0.0",
+    "@ckeditor/ckeditor5-basic-styles": ">=36.0.0",
+    "@ckeditor/ckeditor5-block-quote": ">=36.0.0",
+    "@ckeditor/ckeditor5-code-block": ">=36.0.0",
+    "@ckeditor/ckeditor5-core": ">=36.0.0",
+    "@ckeditor/ckeditor5-editor-classic": ">=36.0.0",
+    "@ckeditor/ckeditor5-essentials": ">=36.0.0",
+    "@ckeditor/ckeditor5-heading": ">=36.0.0",
+    "@ckeditor/ckeditor5-image": ">=36.0.0",
+    "@ckeditor/ckeditor5-indent": ">=36.0.0",
+    "@ckeditor/ckeditor5-inspector": ">=4.1.0",
+    "@ckeditor/ckeditor5-link": ">=36.0.0",
+    "@ckeditor/ckeditor5-list": ">=36.0.0",
+    "@ckeditor/ckeditor5-media-embed": ">=36.0.0",
+    "@ckeditor/ckeditor5-package-tools": "^1.0.0",
+    "@ckeditor/ckeditor5-paragraph": ">=36.0.0",
+    "@ckeditor/ckeditor5-table": ">=36.0.0",
+    "@ckeditor/ckeditor5-theme-lark": ">=36.0.0",
+    "@ckeditor/ckeditor5-upload": ">=36.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-ckeditor5": ">=4.1.1",
+    "http-server": "^14.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.6",
-    "mini-css-extract-plugin": "^2.4.2",
-    "raw-loader": "^4.0.1",
-    "stylelint": "^13.5.0",
-    "stylelint-config-ckeditor5": "^2.0.1",
-    "webpack": "^5.58.1",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^3.11.2"
+    "stylelint": "^13.13.1",
+    "stylelint-config-ckeditor5": ">=4.1.1"
   },
   "engines": {
     "node": ">=14.0.0",
@@ -61,14 +57,20 @@
   "files": [
     "lang",
     "src",
-    "theme"
+    "build",
+    "theme",
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
   ],
   "scripts": {
+    "dll:build": "ckeditor5-package-tools dll:build",
+    "dll:serve": "http-server ./ -o sample/dll.html",
     "lint": "eslint --quiet src/**/*.js",
     "lint:fix": "eslint --quiet src/**/*.js --fix",
-    "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'",
-    "test": "node node_modules/@ckeditor/ckeditor5-dev-tests/bin/test.js",
-    "start": "node node_modules/.bin/webpack serve --mode development"
+    "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
+    "test": "ckeditor5-package-tools test",
+    "prepare": "yarn run dll:build",
+    "start": "ckeditor5-package-tools start"
   },
   "lint-staged": {
     "**/*.js": [