Convert ParserCss to a class

packages/core/src/parser/index.ts

@@ -36,7 +36,7 @@ import { CustomParserCode, CustomParserCodeFunction, ParserEvents } from './type
 
 export default class ParserModule extends Module<ParserConfig & { name?: string }> {
   parserHtml: ParserHtml;
-  parserCss: ReturnType<typeof ParserCss>;
+  parserCss: ParserCss;
   parsersCode = new Map<string, CustomParserCode>();
   events = ParserEvents;
   private _parserCode = '';
@@ -44,7 +44,7 @@ export default class ParserModule extends Module<ParserConfig & { name?: string
   constructor(em: EditorModel) {
     super(em, 'Parser', defConfig());
     const { config } = this;
-    this.parserCss = ParserCss(em, config);
+    this.parserCss = new ParserCss(em, config);
     this.parserHtml = new ParserHtml(em, config);
     const { parserCode } = config;
     Object.entries(config.parsersCode || {}).forEach(([id, parser]) => this.addParserCode(id, parser));

packages/core/src/parser/model/ParserCss.ts

@@ -6,7 +6,12 @@ import { ParsedCssRule } from '../types';
 import BrowserCssParser, { parseSelector, createNode } from './BrowserParserCss';
 import { ParserEvents } from '../types';
 
-const ParserCss = (em?: EditorModel, config: ParserConfig = {}) => ({
+export default class ParserCss {
+  constructor(
+    private em?: EditorModel,
+    private config: ParserConfig = {},
+  ) {}
+
   /**
    * Parse CSS string to a desired model object
    * @param  {String} str CSS string
@@ -14,11 +19,11 @@ const ParserCss = (em?: EditorModel, config: ParserConfig = {}) => ({
    */
   parse(str: string, opts: { throwOnError?: boolean } = {}) {
     let output: CssRuleJSON[] = [];
-    const { parserCss } = config;
-    const editor = em?.Editor;
+    const { parserCss } = this.config;
+    const editor = this.em?.Editor;
     let nodes: CssRuleJSON[] | ParsedCssRule[] = [];
     let error: unknown;
-    const Parser = em?.Parser;
+    const Parser = this.em?.Parser;
     const inputOptions = { input: str };
     Parser?.__emitEvent(ParserEvents.cssBefore, inputOptions);
     const { input } = inputOptions;
@@ -34,7 +39,7 @@ const ParserCss = (em?: EditorModel, config: ParserConfig = {}) => ({
     Parser?.__emitEvent(ParserEvents.css, { input, output, nodes, error });
 
     return output;
-  },
+  }
 
   /**
    * Check the returned node from a custom parser and transforms it to
@@ -70,7 +75,5 @@ const ParserCss = (em?: EditorModel, config: ParserConfig = {}) => ({
     }
 
     return result;
-  },
-});
-
-export default ParserCss;
+  }
+}

packages/core/test/specs/parser/model/ParserCss.ts

@@ -17,12 +17,12 @@ export const CSS_BG_OBJ = {
 };
 
 describe('ParserCss', () => {
-  let obj: ReturnType<typeof ParserCss>;
+  let obj: ParserCss;
   let em: EditorModel;
 
   beforeEach(() => {
     em = new EditorModel({});
-    obj = ParserCss(em, {});
+    obj = new ParserCss(em, {});
   });
 
   afterEach(() => {
@@ -466,7 +466,7 @@ describe('ParserCss', () => {
       selectors: ['test1'],
       style: { color: 'blue' },
     };
-    obj = ParserCss(em, {
+    obj = new ParserCss(em, {
       parserCss: () => [result],
     });
     expect(obj.parse(str)).toEqual([result]);

packages/core/test/specs/parser/model/ParserHtml.ts

@@ -438,7 +438,7 @@ describe('ParserHtml', () => {
         style: { color: 'blue' },
       },
     ];
-    const res = obj.parse(str, ParserCss());
+    const res = obj.parse(str, new ParserCss());
     expect(res.html).toEqual(resHtml);
     expect(res.css).toEqual(resCss);
   });
@@ -458,7 +458,7 @@ describe('ParserHtml', () => {
       <div>a div</div>
     `;
 
-    const css = obj.parse(str, ParserCss()).css || [];
+    const css = obj.parse(str, new ParserCss()).css || [];
     expect(css).toHaveLength(2);
     expect(css[0]).toEqual({
       selectors: [],
@@ -1271,7 +1271,7 @@ describe('ParserHtml', () => {
         },
       ]);
 
-      expect(obj.parse('', ParserCss(), { parserCode: 'custom-html' })).toEqual({
+      expect(obj.parse('', new ParserCss(), { parserCode: 'custom-html' })).toEqual({
         html: [
           {
             tagName: 'a',