Add built Custom Elements into the npm package

.eslintignore

@@ -12,3 +12,6 @@ package
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+# Vanilla build files
+vanilla.js

.github/workflows/code-quality.yml

@@ -7,9 +7,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - uses: actions/setup-node@v3
         with:
           node-version: 21
+          cache: 'pnpm'
 
       - name: Install dependendencies
         run: npm i

.github/workflows/deploy-demo.yml

@@ -10,9 +10,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - uses: actions/setup-node@v3
         with:
           node-version: 21
+          cache: 'pnpm'
 
       - name: Install dependendencies
         run: npm i

.github/workflows/release.yml

@@ -13,9 +13,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - uses: actions/setup-node@v3
         with:
           node-version: 21
+          cache: 'pnpm'
 
       - name: Install dependendencies
         run: npm i
@@ -44,9 +48,13 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - uses: actions/setup-node@v3
         with:
           node-version: 21
+          cache: 'pnpm'
 
       - name: Install dependendencies
         run: npm i

.prettierignore

@@ -12,3 +12,6 @@ dist
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+# Vanilla build files
+vanilla.js

package.json

@@ -13,11 +13,12 @@
 		"core": "cd packages/core && npm run dev",
 		"demo": "cd demo && npm run dev",
 		"lint": "prettier --check . && eslint .",
+		"lint:fix": "prettier --write . && eslint --fix .",
 		"format": "prettier --write .",
 		"check": "npm run check --workspaces --if-present",
 		"test": "npm run test --workspaces --if-present",
 		"build": "npm run build --workspaces --if-present",
-		"prepare": "npx husky install",
+		"prepare": "husky install",
 		"publish-demo": "npm run build && cd demo && npm run gh-pages",
 		"commit": "cz",
 		"semantic-release": "semantic-release",

packages/core/.gitignore

@@ -10,4 +10,6 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vscode
-.idea
+.idea
+vanilla.*
+/**/*.tgz

packages/core/package.json

@@ -13,8 +13,11 @@
 		"build": "vite build && npm run package",
 		"watch": "svelte-package --watch",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
+		"svelte:package": "npm run prepare && svelte-package",
+		"vanilla:package": "rollup -c ./rollup.config.vanilla.js",
+		"package": "run-s *:package && publint",
 		"prepublishOnly": "npm run package",
+		"prepare": "svelte-kit sync",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test": "vitest run",
@@ -27,10 +30,29 @@
 		},
 		"./*.css": {
 			"import": "./dist/styles/*.css"
+		},
+		"./dist/styles/styles.css": {
+			"import": "./dist/styles/styles.css",
+			"default": "./dist/styles/styles.css"
+		},
+		"./dist/styles/light.css": {
+			"import": "./dist/styles/light.css",
+			"default": "./dist/styles/light.css"
+		},
+		"./dist/styles/dark.css": {
+			"import": "./dist/styles/dark.css",
+			"default": "./dist/styles/dark.css"
+		},
+		"./vanilla": {
+			"types": "./vanilla.d.ts",
+			"import": "./vanilla.js"
 		}
 	},
+	"types": "./dist/index.d.ts",
 	"main": "./dist/index.js",
 	"files": [
+		"vanilla.js",
+		"vanilla.d.ts",
 		"dist",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
@@ -40,20 +62,31 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "^2.5.0",
+		"@babel/preset-env": "^7.23.9",
+		"@rollup/plugin-alias": "^5.1.0",
+		"@rollup/plugin-babel": "^6.0.4",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@rollup/plugin-typescript": "^11.1.6",
+		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/diff": "^5.0.3",
 		"dedent": "^1.5.1",
+		"esm-env": "^1.0.0",
+		"npm-run-all": "^4.1.5",
 		"publint": "^0.1.9",
+		"rollup": "^4.9.6",
+		"rollup-plugin-copy": "^3.5.0",
+		"rollup-plugin-svelte": "^7.1.6",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-preprocess": "^5.1.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.1.3",
 		"vitest": "^0.34.5"
 	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
 		"diff": "^5.1.0",
@@ -67,5 +100,8 @@
 		"merge",
 		"mismerge",
 		"diff"
-	]
+	],
+	"publishConfig": {
+		"access": "public"
+	}
 }

packages/core/rollup.config.vanilla.js

@@ -0,0 +1,82 @@
+///
+/// Rollup configuration for the vanilla build which can be reused for
+/// projects that don't use a framework like Svelte (i.e. Vue, React), or can be imported without the need of a bundler.
+///
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import { getBabelOutputPlugin } from '@rollup/plugin-babel';
+import path from 'path';
+import svelte from 'rollup-plugin-svelte';
+import terser from '@rollup/plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import alias from '@rollup/plugin-alias';
+import copy from 'rollup-plugin-copy';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const coreSourcePath = __dirname;
+const coreLibPath = path.join(coreSourcePath, 'src/lib');
+
+const isProduction = !process.env.ROLLUP_WATCH;
+
+if (!isProduction) {
+	throw new Error('This build is only for production');
+}
+
+const outputFolder = path.join(__dirname);
+
+export default [
+	{
+		input: path.join(coreLibPath, 'index.ts'),
+		output: [
+			{
+				file: path.join(outputFolder, '/vanilla.js'),
+				format: 'es',
+				sourcemap: true,
+				inlineDynamicImports: true
+			}
+		],
+		plugins: [
+			alias({
+				entries: [
+					{
+						find: '$lib',
+						replacement: coreLibPath
+					}
+				]
+			}),
+			svelte({
+				preprocess: sveltePreprocess(),
+				compilerOptions: {
+					customElement: true
+				}
+			}),
+			resolve({
+				browser: true,
+				exportConditions: ['svelte']
+			}),
+			typescript({
+				sourceMap: true,
+				inlineSources: true,
+				tsconfig: path.join(coreSourcePath, 'tsconfig.json'),
+				include: [path.join(coreLibPath, '**/*')],
+				// TODO: Add proper types for the bundle
+				declaration: false
+			}),
+			getBabelOutputPlugin({
+				presets: ['@babel/preset-env']
+			}),
+			copy({
+				targets: [
+					{
+						src: path.join(coreSourcePath, '/dist/index.d.ts'),
+						dest: outputFolder,
+						rename: 'vanilla.d.ts'
+					}
+				]
+			}),
+			terser()
+		]
+	}
+];

packages/core/src/lib/components/MisMerge2.svelte

@@ -1,3 +1,10 @@
+<svelte:options
+	customElement={{
+		tag: 'mis-merge2',
+		shadow: 'none'
+	}}
+/>
+
 <script lang="ts">
 	import { joinWithDefault } from '$lib/internal/utils';
 	import { type DiffBlock, LinkedComponentsBlock } from '$lib/internal/blocks';

packages/core/src/lib/components/MisMerge3.svelte

@@ -1,3 +1,10 @@
+<svelte:options
+	customElement={{
+		tag: 'mis-merge3',
+		shadow: 'none'
+	}}
+/>
+
 <script lang="ts">
 	import type { BlockComponent } from '$lib/internal/editor/component';
 	import { onLineChange, type Connection } from '$lib/internal/editor/connection';

packages/core/src/lib/internal/blocks/added.ts

@@ -33,7 +33,7 @@ export class AddedBlock<SideType extends Side = Side> extends LinkedComponentsBl
 		return [this.sidesData].flat().find((sideData) => sideData.side.eq(side))?.lines.length ?? 0;
 	}
 
-	public render() {
+	public render(): BlockComponent[] {
 		return [
 			...[this.sidesData].flat().map(
 				({ side, lines }) =>

packages/core/src/lib/internal/blocks/merge-conflict.ts

@@ -58,7 +58,7 @@ export class MergeConflictBlock extends LinkedComponentsBlock<TwoWaySide> {
 		}
 	}
 
-	public render() {
+	public render(): BlockComponent[] {
 		if (this.resolved) return this.renderResolved();
 		else return this.renderUnresolved();
 	}

packages/core/src/lib/internal/blocks/removed.ts

@@ -33,7 +33,7 @@ export class RemovedBlock<SideType extends Side = Side> extends LinkedComponents
 		return [this.sidesData].flat().find((sideData) => sideData.side.eq(side))?.lines.length ?? 0;
 	}
 
-	public render() {
+	public render(): BlockComponent[] {
 		return [
 			...[this.sidesData].flat().map(
 				({ side, lines }) =>

packages/core/src/lib/internal/utils.ts

@@ -37,4 +37,4 @@ export function debounce<T extends unknown[]>(cb: (...args: T) => unknown, wait
 		clearTimeout(timeout);
 		timeout = setTimeout(() => cb(...args), wait);
 	};
-}
+}