rollup-plugin-react-scoped-css 0.2.3 → 0.5.0

package/dist/parsers/classic-parser.js

@@ -0,0 +1,95 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassicJsxParser = void 0;
+var ClassicJsxParser = /** @class */ (function () {
+    function ClassicJsxParser() {
+    }
+    ClassicJsxParser.prototype.isNodeReactFragment = function (node) {
+        var _a, _b, _c, _d, _e, _f;
+        return ((_c = (_b = (_a = node === null || node === void 0 ? void 0 : node.arguments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.object) === null || _c === void 0 ? void 0 : _c.name) === "React" &&
+            ((_f = (_e = (_d = node === null || node === void 0 ? void 0 : node.arguments) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.property) === null || _f === void 0 ? void 0 : _f.name) === "Fragment";
+    };
+    ClassicJsxParser.prototype.isNodeReactElement = function (node) {
+        var _a, _b, _c, _d;
+        return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' &&
+            ((_b = (_a = node === null || node === void 0 ? void 0 : node.callee) === null || _a === void 0 ? void 0 : _a.object) === null || _b === void 0 ? void 0 : _b.name) === 'React' &&
+            ((_d = (_c = node === null || node === void 0 ? void 0 : node.callee) === null || _c === void 0 ? void 0 : _c.property) === null || _d === void 0 ? void 0 : _d.name) === 'createElement';
+    };
+    ClassicJsxParser.prototype.extendNodeWithAttributes = function (node, attr) {
+        var _this = this;
+        var _a;
+        var arg = (_a = node === null || node === void 0 ? void 0 : node.arguments) === null || _a === void 0 ? void 0 : _a[1];
+        return __assign(__assign({}, node), { arguments: node === null || node === void 0 ? void 0 : node.arguments.map(function (v, i) {
+                if (i === 1) {
+                    if (v.type === 'ObjectExpression') {
+                        return __assign(__assign({}, v), { properties: __spreadArray(__spreadArray([], __read(arg.properties), false), [
+                                _this.createAttributeNode(attr)
+                            ], false) });
+                    }
+                    else {
+                        return {
+                            type: 'ObjectExpression',
+                            properties: [_this.createAttributeNode(attr)]
+                        };
+                    }
+                }
+                return v;
+            }) });
+    };
+    ClassicJsxParser.prototype.createAttributeNode = function (attr) {
+        return {
+            type: 'Property',
+            method: false,
+            shorthand: false,
+            computed: false,
+            key: {
+                type: 'Identifier',
+                name: "\"".concat(attr, "\"")
+            },
+            value: {
+                type: 'Literal',
+                value: true,
+                raw: "true"
+            },
+            kind: 'init'
+        };
+    };
+    return ClassicJsxParser;
+}());
+exports.ClassicJsxParser = ClassicJsxParser;

package/dist/parsers/jsx-parser.model.d.ts

@@ -0,0 +1,9 @@
+export interface JsxParser {
+    isNodeReactElement: (node: any) => boolean;
+    isNodeReactFragment: (node: any) => boolean;
+    extendNodeWithAttributes: (node: any, attr: string) => any;
+}
+export declare enum ParserImplementations {
+    new = "new",
+    classic = "classic"
+}

package/dist/parsers/jsx-parser.model.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParserImplementations = void 0;
+var ParserImplementations;
+(function (ParserImplementations) {
+    ParserImplementations["new"] = "new";
+    ParserImplementations["classic"] = "classic";
+})(ParserImplementations = exports.ParserImplementations || (exports.ParserImplementations = {}));

package/dist/parsers/new-parser.d.ts

@@ -0,0 +1,7 @@
+import { JsxParser } from "./jsx-parser.model";
+export declare class NewJsxParser implements JsxParser {
+    isNodeReactFragment(node: any): boolean;
+    isNodeReactElement(node: any): boolean;
+    extendNodeWithAttributes(node: any, attr: string): any;
+    private createAttributeNode;
+}

package/dist/parsers/new-parser.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewJsxParser = void 0;
+var NewJsxParser = /** @class */ (function () {
+    function NewJsxParser() {
+    }
+    NewJsxParser.prototype.isNodeReactFragment = function (node) {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = node.arguments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type) === "Identifier" &&
+            ['_Fragment', 'Fragment'].includes((_d = (_c = node.arguments) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name);
+    };
+    NewJsxParser.prototype.isNodeReactElement = function (node) {
+        var _a;
+        return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' &&
+            ['_jsxDEV', '_jsx', '_jsxs', 'jsxDev', 'jsx', 'jsxs'].includes((_a = node === null || node === void 0 ? void 0 : node.callee) === null || _a === void 0 ? void 0 : _a.name);
+    };
+    NewJsxParser.prototype.extendNodeWithAttributes = function (node, attr) {
+        var _this = this;
+        var _a;
+        var arg = (_a = node === null || node === void 0 ? void 0 : node.arguments) === null || _a === void 0 ? void 0 : _a[1];
+        return __assign(__assign({}, node), { arguments: node === null || node === void 0 ? void 0 : node.arguments.map(function (v, i) {
+                if (i === 1) {
+                    if (v.type === 'ObjectExpression') {
+                        return __assign(__assign({}, v), { properties: __spreadArray(__spreadArray([], __read(arg.properties), false), [
+                                _this.createAttributeNode(attr)
+                            ], false) });
+                    }
+                    else {
+                        return {
+                            type: 'ObjectExpression',
+                            properties: [_this.createAttributeNode(attr)]
+                        };
+                    }
+                }
+                return v;
+            }) });
+    };
+    NewJsxParser.prototype.createAttributeNode = function (attr) {
+        return {
+            type: 'Property',
+            method: false,
+            shorthand: false,
+            computed: false,
+            key: {
+                type: 'Identifier',
+                name: "\"".concat(attr, "\"")
+            },
+            value: {
+                type: 'Literal',
+                value: true,
+                raw: "true"
+            },
+            kind: 'init'
+        };
+    };
+    return NewJsxParser;
+}());
+exports.NewJsxParser = NewJsxParser;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "0.2.3",
+  "version": "0.5.0",
   "description": "A rollup plugin designed to allow scoped css to be run in react (Compatible with vite and rollup)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
-    "prepare": "npm run build && npm test",
+    "build:watch": "tsc --watch",
     "test": "jest"
   },
   "repository": {
@@ -14,6 +14,18 @@
     "url": "git+https://github.com/cmseguin/rollup-plugin-react-scoped-css.git"
   },
   "author": "cmseguin",
+  "contributors": [
+    "cmseguin (https://github.com/cmseguin)",
+    "helianthuswhite (https://github.com/helianthuswhite)"
+  ],
+  "keywords": [
+    "rollup",
+    "react",
+    "css",
+    "scoped",
+    "vite",
+    "vitejs"
+  ],
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/cmseguin/rollup-plugin-react-scoped-css/issues"
@@ -29,9 +41,15 @@
   "devDependencies": {
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-typescript": "^7.15.0",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^8.0.3",
+    "@semantic-release/release-notes-generator": "^10.0.3",
     "@types/escodegen": "0.0.7",
     "@types/estree": "0.0.50",
     "@types/jest": "^27.0.1",
-    "jest": "^27.0.6"
+    "acorn": "^8.6.0",
+    "jest": "^27.0.6",
+    "semantic-release": "^18.0.1"
   }
 }

package/src/__mocks__/new-compiled-jsx-with-attr.js

@@ -0,0 +1,101 @@
+import {
+  j as jsxRuntime,
+  r as react,
+  R as ReactDOM,
+  a as React
+} from "./vendor.1137a3d7.js";
+var index = "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n";
+var App$1 = ".sub {\n  color: green;\n}";
+var App_scoped = ".App {\n  text-align: center;\n}\n\n.sub {\n  color: blue !important;\n}\n\n.App-logo {\n  height: 40vmin;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .App-logo {\n    animation: App-logo-spin infinite 20s linear;\n  }\n}\n\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n\n.App-link {\n  color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\nbutton {\n  font-size: calc(10px + 2vmin);\n}\n";
+var logo = "/assets/logo.ecc203fb.svg";
+var Sub_scoped = ".sub {\n  color: red;\n}\n.sub__test {\n  margin: 0;\n}\n.sub h2 {\n  font-weight: 300;\n  font-size: 3rem;\n}\n\nh2 {\n  font-size: 10rem;\n}\n\n.drawer {\n  width: 400px;\n}\n.drawer__list-item {\n  padding: 0;\n}\n.drawer__list-item-icon {\n  margin-right: 1rem;\n}\n.drawer__link {\n  display: flex;\n  width: 300px;\n  padding: 1rem;\n  align-items: center;\n  text-decoration: none;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  font-family: \"Quicksand\", \"Roboto\", sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n}\n.drawer__link:hover {\n  background-color: #fafafa;\n}";
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+const Fragment = jsxRuntime.exports.Fragment;
+function Sub() {
+  return jsx("div", {
+    className: "sub",
+    children: jsx("h2", {
+      children: "Sub",
+      "data-v-123456": true
+    }),
+    "data-v-123456": true
+  });
+}
+function App() {
+  const [count, setCount] = react.exports.useState(0);
+  return jsx(Fragment, {
+    children: jsxs("div", {
+      className: "App",
+      children: [
+        jsxs("header", {
+          className: "App-header",
+          children: [
+            jsx("img", {
+              src: logo,
+              className: "App-logo",
+              alt: "logo",
+              "data-v-123456": true
+            }),
+            jsx("p", {
+              children: "Hello Vite + React!",
+              "data-v-123456": true
+            }),
+            jsx("p", {
+              children: jsxs("button", {
+                type: "button",
+                onClick: () => setCount(count2 => count2 + 1),
+                children: [
+                  "count is: ",
+                  count
+                ],
+                "data-v-123456": true
+              }),
+              "data-v-123456": true
+            }),
+            jsxs("p", {
+              children: [
+                "Edit ",
+                jsx("code", {
+                  children: "App.jsx",
+                  "data-v-123456": true
+                }),
+                " and save to test HMR updates."
+              ],
+              "data-v-123456": true
+            }),
+            jsxs("p", {
+              children: [
+                jsx("a", {
+                  className: "App-link",
+                  href: "https://reactjs.org",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: "Learn React",
+                  "data-v-123456": true
+                }),
+                " | ",
+                jsx("a", {
+                  className: "App-link",
+                  href: "https://vitejs.dev/guide/features.html",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: "Vite Docs",
+                  "data-v-123456": true
+                })
+              ],
+              "data-v-123456": true
+            })
+          ],
+          "data-v-123456": true
+        }),
+        jsx(Fragment, { children: jsx(Sub, { "data-v-123456": true }) })
+      ],
+      "data-v-123456": true
+    })
+  });
+}
+ReactDOM.render(jsx(React.StrictMode, {
+  children: jsx(App, { "data-v-123456": true }),
+  "data-v-123456": true
+}), document.getElementById("root"));

package/src/__mocks__/new-compiled-jsx.js

@@ -0,0 +1,64 @@
+import { j as jsxRuntime, r as react, R as ReactDOM, a as React } from "./vendor.1137a3d7.js";
+var index = "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n";
+var App$1 = ".sub {\n  color: green;\n}";
+var App_scoped = ".App {\n  text-align: center;\n}\n\n.sub {\n  color: blue !important;\n}\n\n.App-logo {\n  height: 40vmin;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .App-logo {\n    animation: App-logo-spin infinite 20s linear;\n  }\n}\n\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n\n.App-link {\n  color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\nbutton {\n  font-size: calc(10px + 2vmin);\n}\n";
+var logo = "/assets/logo.ecc203fb.svg";
+var Sub_scoped = '.sub {\n  color: red;\n}\n.sub__test {\n  margin: 0;\n}\n.sub h2 {\n  font-weight: 300;\n  font-size: 3rem;\n}\n\nh2 {\n  font-size: 10rem;\n}\n\n.drawer {\n  width: 400px;\n}\n.drawer__list-item {\n  padding: 0;\n}\n.drawer__list-item-icon {\n  margin-right: 1rem;\n}\n.drawer__link {\n  display: flex;\n  width: 300px;\n  padding: 1rem;\n  align-items: center;\n  text-decoration: none;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  font-family: "Quicksand", "Roboto", sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n}\n.drawer__link:hover {\n  background-color: #fafafa;\n}';
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+const Fragment = jsxRuntime.exports.Fragment;
+function Sub() {
+  return /* @__PURE__ */ jsx("div", {
+    className: "sub",
+    children: /* @__PURE__ */ jsx("h2", {
+      children: "Sub"
+    })
+  });
+}
+function App() {
+  const [count, setCount] = react.exports.useState(0);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "App",
+      children: [/* @__PURE__ */ jsxs("header", {
+        className: "App-header",
+        children: [/* @__PURE__ */ jsx("img", {
+          src: logo,
+          className: "App-logo",
+          alt: "logo"
+        }), /* @__PURE__ */ jsx("p", {
+          children: "Hello Vite + React!"
+        }), /* @__PURE__ */ jsx("p", {
+          children: /* @__PURE__ */ jsxs("button", {
+            type: "button",
+            onClick: () => setCount((count2) => count2 + 1),
+            children: ["count is: ", count]
+          })
+        }), /* @__PURE__ */ jsxs("p", {
+          children: ["Edit ", /* @__PURE__ */ jsx("code", {
+            children: "App.jsx"
+          }), " and save to test HMR updates."]
+        }), /* @__PURE__ */ jsxs("p", {
+          children: [/* @__PURE__ */ jsx("a", {
+            className: "App-link",
+            href: "https://reactjs.org",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Learn React"
+          }), " | ", /* @__PURE__ */ jsx("a", {
+            className: "App-link",
+            href: "https://vitejs.dev/guide/features.html",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Vite Docs"
+          })]
+        })]
+      }), /* @__PURE__ */ jsx(Fragment, {
+        children: /* @__PURE__ */ jsx(Sub, {})
+      })]
+    })
+  });
+}
+ReactDOM.render(/* @__PURE__ */ jsx(React.StrictMode, {
+  children: /* @__PURE__ */ jsx(App, {})
+}), document.getElementById("root"));

package/src/__mocks__/sample-code-file.js

@@ -0,0 +1,4 @@
+let array = [1, 2, 3];
+
+const multiply = (arr) => arr.map(x => x * 2);
+const newArray = multiply(array);

package/src/ast-iterator.spec.ts

@@ -0,0 +1,19 @@
+import { readFile } from "fs/promises";
+import { resolve } from "path";
+import { parse } from "acorn";
+import { astIterator } from "./ast-iterator";
+
+describe('astIterator', () => {
+  it('should iterate through all nodes', async () => {
+    let iterationCount = 0;
+    const file = await readFile(resolve(__dirname, './__mocks__/sample-code-file.js'), { encoding: 'utf-8' })
+    const ast = parse(file, { sourceType: 'module', ecmaVersion: 2022 });
+
+    for (const node of astIterator(ast)) {
+      iterationCount++;
+      expect(node).toBeTruthy();
+    }
+
+    expect(iterationCount).toBe(28);
+  });
+})

package/src/ast-iterator.ts

@@ -0,0 +1,27 @@
+
+const isNode = (obj: any) => {
+  return typeof obj === 'object' && 
+      typeof (obj as any)?.end === 'number' && 
+      typeof (obj as any)?.start === 'number' && 
+      typeof (obj as any)?.type === 'string'
+}
+
+export const astIterator = function* (ast: any): IterableIterator<any> {
+  if (!ast) { return }
+
+  for (let key of Object.keys(ast)) {
+    // Skip useless keys
+    if (['end', 'start', 'type'].includes(key)) { continue; }
+
+    // If key value is an array, iterate over it
+    if (Array.isArray(ast[key])) {
+      for (let nodeIndex in ast[key]) {
+        yield *astIterator(ast[key][nodeIndex])
+      }
+    } else if(isNode(ast[key])) {
+      yield *astIterator(ast[key])
+    }
+  }
+
+  yield ast
+}

package/src/ast-transformer.spec.ts

@@ -0,0 +1,20 @@
+import { readFile } from "fs/promises";
+import { resolve } from "path";
+import { parse } from "acorn";
+import { astTransformer } from "./ast-transformer";
+
+describe('astTransformer', () => {
+  it('should iterate through all nodes', async () => {
+    let iterationCount = 0;
+    const file = await readFile(resolve(__dirname, './__mocks__/sample-code-file.js'), { encoding: 'utf-8' })
+    const ast = parse(file, { sourceType: 'module', ecmaVersion: 2022 });
+
+    const newAst = astTransformer(ast, (node) => {
+      iterationCount++;
+      expect(node).toBeTruthy();
+    })
+
+    expect(newAst).toBeDefined();
+    expect(iterationCount).toBe(28);
+  });
+})

package/src/ast-transformer.ts

@@ -0,0 +1,24 @@
+const isNode = (obj: any) => {
+  return typeof obj === 'object' && 
+      typeof (obj as any)?.end === 'number' && 
+      typeof (obj as any)?.start === 'number' && 
+      typeof (obj as any)?.type === 'string'
+}
+
+export const astTransformer = (ast: any, callback: Function) => {
+  for (let key of Object.keys(ast)) {
+    if (['end', 'start', 'type'].includes(key)) { continue; }
+
+    if (Array.isArray(ast[key])) {
+      for (let nodeIndex in ast[key]) {
+        ast[key][nodeIndex] = astTransformer(ast[key][nodeIndex], callback)
+      }
+    } else if(isNode(ast[key])) {
+      ast[key] = astTransformer(ast[key], callback)
+    }
+  }
+
+  const result = callback(ast);
+
+  return typeof result !== 'undefined' ? result : ast
+}

package/src/ast.utils.spec.ts

@@ -5,18 +5,42 @@ import { generate } from 'escodegen'
 import { addHashAttributesToJsxTagsAst } from './ast.utils'
 
 describe('AST Utils', () => {
-  it('Should add the attr to the right elements', async () => {
-    const compiled = await readFile(resolve(__dirname, './__mocks__/compiled-jsx.js'), { encoding: 'utf-8' })
-    const compiledWithAttr = await readFile(resolve(__dirname, './__mocks__/compiled-jsx-with-attr.js'), { encoding: 'utf-8' })
-    const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" })
-    const modifiedAst = addHashAttributesToJsxTagsAst(ast, 'data-v-123456')
-    const modifiedCompiled = generate(modifiedAst, { format: {
-      indent: {
-        style: '  ',
-      },
-      quotes: 'double',
-    } })
+  beforeEach(() => {
+    global.implementation = null
+  })
 
-    expect(modifiedCompiled).toEqual(compiledWithAttr)
+  describe('classic implementation', () => {
+    it('Should add the attr to the right elements', async () => {
+      const compiled = await readFile(resolve(__dirname, './__mocks__/classic-compiled-jsx.js'), { encoding: 'utf-8' })
+      const compiledWithAttr = await readFile(resolve(__dirname, './__mocks__/classic-compiled-jsx-with-attr.js'), { encoding: 'utf-8' })
+      const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" })
+      const modifiedAst = addHashAttributesToJsxTagsAst(ast, 'data-v-123456')
+      const modifiedCompiled = generate(modifiedAst, { format: {
+        indent: {
+          style: '  ',
+        },
+        quotes: 'double',
+      } })
+  
+      expect(modifiedCompiled).toEqual(compiledWithAttr)
+    })
+  })
+  
+  describe('new implementation', () => {
+    it('Should add the attr to the right elements', async () => {
+      const compiled = await readFile(resolve(__dirname, './__mocks__/new-compiled-jsx.js'), { encoding: 'utf-8' })
+      const compiledWithAttr = await readFile(resolve(__dirname, './__mocks__/new-compiled-jsx-with-attr.js'), { encoding: 'utf-8' })
+      const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" })
+      const modifiedAst = addHashAttributesToJsxTagsAst(ast, 'data-v-123456')
+      const modifiedCompiled = generate(modifiedAst, { format: {
+        indent: {
+          style: '  ',
+        },
+        quotes: 'double',
+      } })
+  
+      expect(modifiedCompiled).toEqual(compiledWithAttr)
+    })
   })
+  
 })