Minimal working version with CodeMirror

2024-11-30 04:29:17 +01:00 · 2023-06-02 09:24:32 -04:00 · 2023-06-02 09:24:32 -04:00 · 425cafdc65
commit 425cafdc65
parent 69f883fa71
8 changed files with 108270 additions and 9 deletions
--- a/package.json
+++ b/package.json
@ -45,6 +45,7 @@
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.2",
    "@babel/preset-typescript": "^7.21.5",
+    "@codemirror/lang-sass": "^6.0.1",
    "@rollup/plugin-babel": "^6.0.3",
    "@rollup/plugin-commonjs": "^25.0.0",
    "@rollup/plugin-inject": "^5.0.3",
@ -60,6 +61,7 @@
    "@typescript-eslint/eslint-plugin": "^5.59.7",
    "@typescript-eslint/parser": "^5.59.7",
    "cheerio": "^1.0.0-rc.12",
+    "codemirror": "^6.0.1",
    "date-fns": "^2.30.0",
    "deep-equal": "^2.2.1",
    "eslint": "^8.41.0",
--- a/rollup.config.js
+++ b/rollup.config.js
@ -24,12 +24,23 @@ if (prod) {
  plugins.push(terser());
 }

-module.exports = defineConfig({
-  input: 'source/assets/js/sass.ts',
-  output: {
-    file: 'source/assets/dist/js/sass.js',
-    format: 'iife',
-    sourcemap: !prod,
+module.exports = defineConfig([
+  {
+    input: 'source/assets/js/sass.ts',
+    output: {
+      file: 'source/assets/dist/js/sass.js',
+      format: 'iife',
+      sourcemap: !prod,
+    },
+    plugins,
  },
-  plugins,
-});
+  {
+    input: 'source/assets/js/playground/playground.ts',
+    output: {
+      file: 'source/assets/dist/js/playground.js',
+      format: 'iife',
+      sourcemap: !prod,
+    },
+    plugins,
+  }
+]);
--- a/source/assets/js/playground/editor-setup.ts
+++ b/source/assets/js/playground/editor-setup.ts
@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import {
+  autocompletion,
+  closeBrackets,
+  closeBracketsKeymap,
+  completionKeymap,
+} from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import {
+  bracketMatching,
+  defaultHighlightStyle,
+  foldGutter,
+  foldKeymap,
+  indentOnInput,
+  syntaxHighlighting,
+} from '@codemirror/language';
+import { lintKeymap } from '@codemirror/lint';
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import {
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  keymap,
+  lineNumbers,
+  rectangularSelection,
+} from '@codemirror/view';
+
+const editorSetup = /*@__PURE__*/ (() => [
+  lineNumbers(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  foldGutter(),
+  // drawSelection(),
+  dropCursor(),
+  // EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+  bracketMatching(),
+  closeBrackets(),
+  autocompletion(),
+  // rectangularSelection(),
+  // crosshairCursor(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...searchKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...completionKeymap,
+    ...lintKeymap,
+  ]),
+])();
+export { editorSetup };
--- a/source/assets/js/playground/playground.ts
+++ b/source/assets/js/playground/playground.ts
@ -0,0 +1,47 @@
+import { sass as langSass } from '@codemirror/lang-sass';
+import { Text } from '@codemirror/state';
+import { EditorView } from 'codemirror';
+
+import { compileString } from '../sass.default.js';
+import { editorSetup } from './editor-setup.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+const editor = new EditorView({
+  extensions: [
+    editorSetup,
+    langSass(),
+    EditorView.updateListener.of((v) => {
+      if (v.docChanged) {
+        updateCSS(v.state.doc.toString());
+      }
+    }),
+  ],
+  parent: document.getElementById('editor') || document.body,
+});
+const viewer = new EditorView({
+  extensions: [editorSetup, langSass()],
+  parent: document.getElementById('css-view') || document.body,
+});
+
+function updateCSS(val: string) {
+  const css = parse(val);
+  const text = Text.of(css.split('\n'));
+  viewer.dispatch({
+    changes: {
+      from: 0,
+      to: viewer.state.doc.toString().length,
+      insert: text,
+    },
+  });
+}
+
+function parse(css: string): string {
+  let result;
+  try {
+    result = compileString(css, { syntax: 'scss' }).css;
+  } catch (error) {
+    result = error?.toString();
+  }
+
+  return result;
+}
--- a/source/assets/js/sass.dart.js
+++ b/source/assets/js/sass.dart.js
--- a/source/assets/js/sass.default.js
+++ b/source/assets/js/sass.default.js
@ -0,0 +1,32 @@
+import * as immutable from "immutable"
+import "./sass.dart.js";
+
+const _cliPkgLibrary = globalThis._cliPkgExports.pop();
+if (globalThis._cliPkgExports.length === 0) delete globalThis._cliPkgExports;
+const _cliPkgExports = {};
+_cliPkgLibrary.load({immutable}, _cliPkgExports);
+
+export const compile = _cliPkgExports.compile;
+export const compileAsync = _cliPkgExports.compileAsync;
+export const compileString = _cliPkgExports.compileString;
+export const compileStringAsync = _cliPkgExports.compileStringAsync;
+export const Logger = _cliPkgExports.Logger;
+export const SassArgumentList = _cliPkgExports.SassArgumentList;
+export const SassBoolean = _cliPkgExports.SassBoolean;
+export const SassColor = _cliPkgExports.SassColor;
+export const SassFunction = _cliPkgExports.SassFunction;
+export const SassList = _cliPkgExports.SassList;
+export const SassMap = _cliPkgExports.SassMap;
+export const SassNumber = _cliPkgExports.SassNumber;
+export const SassString = _cliPkgExports.SassString;
+export const Value = _cliPkgExports.Value;
+export const CustomFunction = _cliPkgExports.CustomFunction;
+export const ListSeparator = _cliPkgExports.ListSeparator;
+export const sassFalse = _cliPkgExports.sassFalse;
+export const sassNull = _cliPkgExports.sassNull;
+export const sassTrue = _cliPkgExports.sassTrue;
+export const Exception = _cliPkgExports.Exception;
+export const PromiseOr = _cliPkgExports.PromiseOr;
+export const info = _cliPkgExports.info;
+export const render = _cliPkgExports.render;
+export const renderSync = _cliPkgExports.renderSync;
--- a/source/playground.liquid
+++ b/source/playground.liquid
@ -4,4 +4,7 @@ title: 'Playground'
 is_playground: true
 ---

-Playground placeholder
+<div id="editor" style="height:100pt"></div>
+<div id="css-view" style="height:100pt"></div>
+
+<script type="module" src="/assets/dist/js/playground.js"></script>
--- a/yarn.lock
+++ b/yarn.lock
@ -1495,6 +1495,115 @@ __metadata:
  languageName: node
  linkType: hard

+"@codemirror/autocomplete@npm:^6.0.0":
+  version: 6.7.1
+  resolution: "@codemirror/autocomplete@npm:6.7.1"
+  dependencies:
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.6.0
+    "@lezer/common": ^1.0.0
+  peerDependencies:
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+    "@lezer/common": ^1.0.0
+  checksum: 5f1331cceb6a7b0bd4dc9bad6025d16d1c415bfc2fba29b452f9f5501abd34b75a240e3a20fb9fed92a82a666e54562c32cfe220892713bfbd5a5a16fa004cd8
+  languageName: node
+  linkType: hard
+
+"@codemirror/commands@npm:^6.0.0":
+  version: 6.2.4
+  resolution: "@codemirror/commands@npm:6.2.4"
+  dependencies:
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.2.0
+    "@codemirror/view": ^6.0.0
+    "@lezer/common": ^1.0.0
+  checksum: 468895fa19ff0554181b698c81f850820de5c0289cab92c44392fb127286f09ca72b921d6ea4353b70b616a4fd0c3667d86b6f917202a3ad2e196eb7b581f7b6
+  languageName: node
+  linkType: hard
+
+"@codemirror/lang-css@npm:^6.1.1":
+  version: 6.2.0
+  resolution: "@codemirror/lang-css@npm:6.2.0"
+  dependencies:
+    "@codemirror/autocomplete": ^6.0.0
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@lezer/common": ^1.0.2
+    "@lezer/css": ^1.0.0
+  checksum: d824f169083613b63f04992c24d3fecd45c718cd3deb9da3f332dd3a889a762d05ea812e31ddf7ee4b661722f8c8b49676515cb98609067c53e25ac8b469a5e4
+  languageName: node
+  linkType: hard
+
+"@codemirror/lang-sass@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "@codemirror/lang-sass@npm:6.0.1"
+  dependencies:
+    "@codemirror/lang-css": ^6.1.1
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@lezer/common": ^1.0.2
+    "@lezer/sass": ^1.0.0
+  checksum: 1c5d472508f922c99077b1015818917a94ce7e558faa494d57458e1d89ae3a2664b9248cb3dac2b9ee3f6667fdbbb19e58b1abcde0bc56d9d4445cc89ee5be8f
+  languageName: node
+  linkType: hard
+
+"@codemirror/language@npm:^6.0.0":
+  version: 6.7.0
+  resolution: "@codemirror/language@npm:6.7.0"
+  dependencies:
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+    "@lezer/common": ^1.0.0
+    "@lezer/highlight": ^1.0.0
+    "@lezer/lr": ^1.0.0
+    style-mod: ^4.0.0
+  checksum: 673905e9eb80f039a5e6c59a8aeca217e124a9a03734848043192aeff9e5b3a82f150559f7bd637ee197c4b2171eb5b04e757d717922128ea4fecca1ac6ecac4
+  languageName: node
+  linkType: hard
+
+"@codemirror/lint@npm:^6.0.0":
+  version: 6.2.1
+  resolution: "@codemirror/lint@npm:6.2.1"
+  dependencies:
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+    crelt: ^1.0.5
+  checksum: 0e383c6b8b0fc463f90f8ebdc71628ba39cffbe4f3667a8382b8eedb61aff9eafe947cb3db947701c8f306acdc9576a2da889d0161ccdd14c9245705cfbd4571
+  languageName: node
+  linkType: hard
+
+"@codemirror/search@npm:^6.0.0":
+  version: 6.4.0
+  resolution: "@codemirror/search@npm:6.4.0"
+  dependencies:
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+    crelt: ^1.0.5
+  checksum: 441e04fc896ac984f224e3adb20bc8a6c63d929778335c70d2cb1e3843674c7998db93e2ab1cd05e8276cb3819766cd23951eec748fdf8e66e3611bd9a55aab5
+  languageName: node
+  linkType: hard
+
+"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.1.4, @codemirror/state@npm:^6.2.0":
+  version: 6.2.1
+  resolution: "@codemirror/state@npm:6.2.1"
+  checksum: d12a321d0471b264b9d3259042bff913a8b939e8d28d408ff452004538a71ca9d5329df3f8a1d8a9183f5b42a7ef5b200737bcab1065714f5ae8e0a5ba9d59d3
+  languageName: node
+  linkType: hard
+
+"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.6.0":
+  version: 6.12.0
+  resolution: "@codemirror/view@npm:6.12.0"
+  dependencies:
+    "@codemirror/state": ^6.1.4
+    style-mod: ^4.0.0
+    w3c-keyname: ^2.2.4
+  checksum: 512cbc9c05ac2cfa738cdf7aac711847b44e24ff5869f31839a9fcc11da6a512448fa9bc980535d55b897de80d49e744336a2724ca1fe3dae8bfcb31e339fe64
+  languageName: node
+  linkType: hard
+
 "@cspotcode/source-map-support@npm:^0.8.0":
  version: 0.8.1
  resolution: "@cspotcode/source-map-support@npm:0.8.1"
@ -1696,6 +1805,51 @@ __metadata:
  languageName: node
  linkType: hard

+"@lezer/common@npm:^1.0.0, @lezer/common@npm:^1.0.2":
+  version: 1.0.3
+  resolution: "@lezer/common@npm:1.0.3"
+  checksum: cc90dc2f0aeaebeb3fe886cbd27f8b1e8bee817d8c2efff178604807debd68c5db820fd23afb830962780063d21891afbdf564420221faca2822e77bc6327184
+  languageName: node
+  linkType: hard
+
+"@lezer/css@npm:^1.0.0":
+  version: 1.1.2
+  resolution: "@lezer/css@npm:1.1.2"
+  dependencies:
+    "@lezer/highlight": ^1.0.0
+    "@lezer/lr": ^1.0.0
+  checksum: 02218fe6901428e191a91a1f1a3728a051af982bafaf37144884c9261a7e24b2ad1dfdaa6e7feeb160e5bc34157ce92213cd92ae244cdf0b8485b8b8113850f8
+  languageName: node
+  linkType: hard
+
+"@lezer/highlight@npm:^1.0.0":
+  version: 1.1.6
+  resolution: "@lezer/highlight@npm:1.1.6"
+  dependencies:
+    "@lezer/common": ^1.0.0
+  checksum: 411a702394c4c996b7d7f145a38f3a85a8cc698b3918acc7121c629255bb76d4ab383753f69009e011dc415210c6acbbb5b27bde613259ab67e600b29397b03b
+  languageName: node
+  linkType: hard
+
+"@lezer/lr@npm:^1.0.0":
+  version: 1.3.6
+  resolution: "@lezer/lr@npm:1.3.6"
+  dependencies:
+    "@lezer/common": ^1.0.0
+  checksum: b2bbcfecc01bd9c801f3ee636ceda333adbbea1f274017cec6f315a23346e7a035a984f325d4f1cd14b157d74d28badda6f794514c29a0b078f7fb3357cdfc32
+  languageName: node
+  linkType: hard
+
+"@lezer/sass@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "@lezer/sass@npm:1.0.1"
+  dependencies:
+    "@lezer/highlight": ^1.0.0
+    "@lezer/lr": ^1.0.0
+  checksum: faf286e0da81d88fb1d84db12002f4f23eb06514afb03f7de0c8bc7d4b4113dfc279f3a985b5449aed8995e410e3d856c5e481876790ec607845b2478cbb9ca2
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
  version: 2.1.5
  resolution: "@nodelib/fs.scandir@npm:2.1.5"
@ -2872,6 +3026,21 @@ __metadata:
  languageName: node
  linkType: hard

+"codemirror@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "codemirror@npm:6.0.1"
+  dependencies:
+    "@codemirror/autocomplete": ^6.0.0
+    "@codemirror/commands": ^6.0.0
+    "@codemirror/language": ^6.0.0
+    "@codemirror/lint": ^6.0.0
+    "@codemirror/search": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+  checksum: 1a78f7077ac5801bdbff162aa0c61bf2b974603c7e9a477198c3ce50c789af674a061d7c293c58b73807eda345c2b5228c38ad2aabb9319d552d5486f785cbef
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
  version: 1.9.3
  resolution: "color-convert@npm:1.9.3"
@ -3023,6 +3192,13 @@ __metadata:
  languageName: node
  linkType: hard

+"crelt@npm:^1.0.5":
+  version: 1.0.6
+  resolution: "crelt@npm:1.0.6"
+  checksum: dad842093371ad702afbc0531bfca2b0a8dd920b23a42f26e66dabbed9aad9acd5b9030496359545ef3937c3aced0fd4ac39f7a2d280a23ddf9eb7fdcb94a69f
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^6.0.5":
  version: 6.0.5
  resolution: "cross-spawn@npm:6.0.5"
@ -7091,6 +7267,7 @@ __metadata:
    "@babel/core": ^7.22.1
    "@babel/preset-env": ^7.22.2
    "@babel/preset-typescript": ^7.21.5
+    "@codemirror/lang-sass": ^6.0.1
    "@rollup/plugin-babel": ^6.0.3
    "@rollup/plugin-commonjs": ^25.0.0
    "@rollup/plugin-inject": ^5.0.3
@ -7106,6 +7283,7 @@ __metadata:
    "@typescript-eslint/eslint-plugin": ^5.59.7
    "@typescript-eslint/parser": ^5.59.7
    cheerio: ^1.0.0-rc.12
+    codemirror: ^6.0.1
    date-fns: ^2.30.0
    deep-equal: ^2.2.1
    eslint: ^8.41.0
@ -7575,6 +7753,13 @@ __metadata:
  languageName: node
  linkType: hard

+"style-mod@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "style-mod@npm:4.0.3"
+  checksum: 934556e720bd29026ff8fef43a1a35b58957813025b91f996d886e9405acf934ddb1934def4400b174bd7784c9263eb9c71f07ae83925af9271b7d921d546854
+  languageName: node
+  linkType: hard
+
 "style-search@npm:^0.1.0":
  version: 0.1.0
  resolution: "style-search@npm:0.1.0"
@ -8157,6 +8342,13 @@ __metadata:
  languageName: node
  linkType: hard

+"w3c-keyname@npm:^2.2.4":
+  version: 2.2.7
+  resolution: "w3c-keyname@npm:2.2.7"
+  checksum: 91e057b1ec28e0bafcaf28def12023f0e083fd473c40d0a9c2aa01a975d227200d75ff6d8eb6961bb4608b967b1df1dd86786b52ee9489cb9a2ebeed881a63ae
+  languageName: node
+  linkType: hard
+
 "which-boxed-primitive@npm:^1.0.2":
  version: 1.0.2
  resolution: "which-boxed-primitive@npm:1.0.2"