feat: add croact-guides

package.json

@@ -73,7 +73,7 @@
         ]
     },
     "resolutions": {
-        "@daybrush/utils": "^1.7.1",
+        "@daybrush/utils": "^1.11.0",
         "@types/react": "^16.9.17",
         "typescript": "^4.5.0 <4.6.0",
         "@egjs/agent": "^2.2.1",
@@ -84,12 +84,12 @@
         "framework-utils": "^1.1.0",
         "gesto": "^1.13.4",
         "overlap-area": "^1.1.0",
-        "react-compat-css-styled": "^1.0.8",
-        "react-css-styled": "^1.0.3",
+        "croact-css-styled": "^1.1.2",
+        "react-css-styled": "^1.1.2",
         "tslib": "^2.3.0"
     },
     "overrides": {
-        "@daybrush/utils": "^1.7.1",
+        "@daybrush/utils": "^1.11.0",
         "@types/react": "^16.9.17",
         "typescript": "^4.5.0 <4.6.0",
         "@egjs/agent": "^2.2.1",
@@ -100,8 +100,8 @@
         "framework-utils": "^1.1.0",
         "gesto": "^1.13.4",
         "overlap-area": "^1.1.0",
-        "react-compat-css-styled": "^1.0.8",
-        "react-css-styled": "^1.0.3",
+        "croact-css-styled": "^1.1.2",
+        "react-css-styled": "^1.1.2",
         "tslib": "^2.3.0"
     }
 }

packages/react-compat-guides/package.json → packages/croact-guides/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "react-compat-guides",
+    "name": "croact-guides",
     "version": "0.21.0",
     "description": "A React Compat Guides component that can draw ruler and manage guidelines.",
     "main": "./dist/guides.cjs.js",
@@ -24,7 +24,7 @@
     ],
     "repository": {
         "type": "git",
-        "url": "https://github.com/daybrush/guides/blob/master/packages/react-compat-guides"
+        "url": "https://github.com/daybrush/guides/blob/master/packages/croact-guides"
     },
     "author": "Daybrush",
     "license": "MIT",
@@ -36,6 +36,7 @@
         "./*",
         "src/*",
         "dist/*",
+        "declaration/*",
         "README.md"
     ],
     "devDependencies": {
@@ -44,9 +45,9 @@
         "@types/react": "^16.0.0",
         "keycon": "^0.3.0",
         "print-sizes": "^0.2.0",
-        "react-simple-compat": "^1.2.2",
+        "croact": "^1.0.0",
         "rollup-plugin-css-bundle": "^1.0.4",
-        "rollup-plugin-react-compat": "^0.1.0",
+        "rollup-plugin-react-compat": "^0.1.1",
         "scenejs": "^1.1.4",
         "shape-svg": "^0.3.3",
         "tslint": "^5.16.0",
@@ -59,8 +60,8 @@
         "css-to-mat": "^1.0.3",
         "framework-utils": "^1.1.0",
         "gesto": "^1.13.4",
-        "react-compat-css-styled": "^1.0.6",
-        "react-compat-ruler": "^0.14.0",
-        "react-css-styled": "^1.0.2"
+        "croact-css-styled": "^1.1.2",
+        "croact-ruler": "^0.15.0",
+        "react-css-styled": "^1.1.2"
     }
 }

packages/react-compat-guides/rollup.config.js → packages/croact-guides/rollup.config.js

@@ -3,9 +3,9 @@ import builder from "@daybrush/builder";
 import reactCompat from "rollup-plugin-react-compat";
 
 const external = {
-    "react-simple-compat": "react-simple-compat",
-    "react-compat-ruler": "react-compat-ruler",
-    "react-compat-css-styled": "react-compat-css-styled",
+    "croact": "croact",
+    "croact-ruler": "croact-ruler",
+    "croact-css-styled": "croact-css-styled",
     "@daybrush/utils": "utils",
     "css-styled": "css-styled",
     "framework-utils": "framework-utils",
@@ -17,10 +17,10 @@ const external = {
 
 
 const reactPlugin = reactCompat({
-    useReactCompat: true,
+    useCroact: true,
     aliasModules: {
-        "@scena/react-ruler": "react-compat-ruler",
-        "react-css-styled": "react-compat-css-styled",
+        "@scena/react-ruler": "croact-ruler",
+        "react-css-styled": "croact-css-styled",
     }
 })
 

packages/guides/package.json

@@ -32,6 +32,7 @@
         "./*",
         "src/*",
         "dist/*",
+        "declaration/*",
         "README.md"
     ],
     "homepage": "https://daybrush.com/guides",
@@ -52,14 +53,14 @@
         "react": "^16.12.0",
         "react-dom": "^16.12.0",
         "rollup-plugin-css-bundle": "^1.0.4",
-        "rollup-plugin-react-compat": "^0.1.0",
+        "rollup-plugin-react-compat": "^0.1.1",
         "scenejs": "^1.1.4",
         "tslint": "^5.18.0",
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
         "@scena/event-emitter": "^1.0.4",
-        "react-compat-guides": "~0.21.0",
-        "react-simple-compat": "^1.2.2"
+        "croact-guides": "~0.21.0",
+        "croact": "^1.0.0"
     }
 }

packages/guides/rollup.config.js

@@ -4,19 +4,19 @@ import compat from "rollup-plugin-react-compat";
 
 
 const reactCompat = compat({
-    useReactCompat: true,
+    useCroact: true,
     aliasModules: {
-        "@scena/react-guides": "react-compat-guides",
+        "@scena/react-guides": "croact-guides",
     },
 });
 const resolveReactCompat = compat({
-    useReactCompat: true,
+    useCroact: true,
     resolveCompat: true,
 });
 
 const external = {
-    "react-simple-compat": "react-simple-compat",
-    "react-compat-guides": "react-compat-guides",
+    "croact": "croact",
+    "croact-guides": "croact-guides",
     "@egjs/component": "@egjs/component",
     "@daybrush/utils": "@daybrush/utils",
     "gesto": "gesto",

packages/guides/src/GuidesManager.tsx

@@ -1,11 +1,11 @@
 import { ref, Properties } from "framework-utils";
 import * as React from "react";
-import { render } from "react-dom";
 import { PROPERTIES, METHODS, EVENTS } from "./consts";
 import { GuidesInterface, GuidesEvents, GuidesOptions } from "@scena/react-guides/declaration/types";
 import InnerGuides from "./InnerGuides";
 import EventEmitter from "@scena/event-emitter";
 import { camelize } from "@daybrush/utils";
+import { ContainerProvider, renderSelf } from "croact";
 
 @Properties(METHODS as any, (prototype, property) => {
     if (prototype[property]) {
@@ -39,7 +39,9 @@ import { camelize } from "@daybrush/utils";
  * @extends EventEmitter
  */
 class Guides extends EventEmitter<GuidesEvents> {
-    private tempElement = document.createElement("div");
+    private containerProvider: ContainerProvider | null = null;
+    private selfElement: HTMLElement | null = null;
+    private _warp = false;
     private innerGuides!: InnerGuides;
     /**
      * @sort 1
@@ -53,10 +55,20 @@ class Guides extends EventEmitter<GuidesEvents> {
         EVENTS.forEach(name => {
             events[camelize(`on ${name}`)] = (e: any) => this.trigger(name as any, e);
         });
+        let selfElement!: HTMLElement;
 
-        render(
-            <InnerGuides  {...options} {...events} container={container} ref={ref(this, "innerGuides")} />,
-            this.tempElement,
+        if (options.warpSelf) {
+            delete options.warpSelf;
+            this._warp = true;
+            selfElement = container;
+        } else {
+            selfElement = document.createElement("div");
+            container.appendChild(selfElement);
+        }
+        renderSelf(
+            <InnerGuides ref={ref(this, "innerGuides")}
+                {...options} />,
+            selfElement,
         );
     }
     /**
@@ -76,8 +88,17 @@ class Guides extends EventEmitter<GuidesEvents> {
      * destroy guides
      */
     public destroy() {
-        render(null, this.tempElement);
-        this.tempElement = null;
+        const selfElement = this.selfElement!;
+
+        renderSelf(
+            null,
+            selfElement!,
+            this.containerProvider,
+        );
+        if (!this._warp) {
+            selfElement?.parentElement?.removeChild(selfElement);
+        }
+        this.selfElement = null;
         this.innerGuides = null;
     }
     private getInnerGuides() {

packages/guides/src/InnerGuides.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { createPortal } from "react-dom";
 import { ref } from "framework-utils";
 import ReactGuides from "@scena/react-guides";
 import { GuidesOptions } from "@scena/react-guides/declaration/types";
@@ -15,7 +14,6 @@ export default class InnerGuides extends React.Component<InnerGuidesProps, Inner
         this.state = this.props;
     }
     public render() {
-        const { container, ...state } = this.state;
-        return createPortal(<ReactGuides ref={ref(this, "guides")} {...state} />, container);
+        return <ReactGuides ref={ref(this, "guides")} {...this.state} />;
     }
 }

packages/ngx-guides/projects/ngx-guides/src/lib/consts.ts

@@ -1,4 +1,4 @@
 // auto
 // eslint-disable-next-line max-len
-export const ANGULAR_GUIDES_INPUTS: ["className","rulerStyle","snapThreshold","snaps","displayDragPos","cspNonce","dragPosFormat","defaultGuides","showGuides","scrollOptions","guideStyle","guidesOffset","digit","dragGuideStyle","displayGuidePos","guidePosFormat","guidePosStyle","lockGuides","type","width","height","unit","zoom","direction","textAlign","font","segment","mainLineSize","longLineSize","shortLineSize","lineOffset","textOffset","negativeRuler","range","scrollPos","style","backgroundColor","rangeBackgroundColor","lineColor","textColor","textBackgroundColor","textFormat","portalContainer","selectedBackgroundColor","selectedRanges","defaultPixelScale","useResizeObserver","selectedRangesText","selectedRangesTextColor","selectedRangesTextOffset"] = ["className","rulerStyle","snapThreshold","snaps","displayDragPos","cspNonce","dragPosFormat","defaultGuides","showGuides","scrollOptions","guideStyle","guidesOffset","digit","dragGuideStyle","displayGuidePos","guidePosFormat","guidePosStyle","lockGuides","type","width","height","unit","zoom","direction","textAlign","font","segment","mainLineSize","longLineSize","shortLineSize","lineOffset","textOffset","negativeRuler","range","scrollPos","style","backgroundColor","rangeBackgroundColor","lineColor","textColor","textBackgroundColor","textFormat","portalContainer","selectedBackgroundColor","selectedRanges","defaultPixelScale","useResizeObserver","selectedRangesText","selectedRangesTextColor","selectedRangesTextOffset"];
+export const ANGULAR_GUIDES_INPUTS: ["className","rulerStyle","snapThreshold","snaps","displayDragPos","cspNonce","dragPosFormat","defaultGuides","showGuides","scrollOptions","guideStyle","guidesOffset","digit","dragGuideStyle","displayGuidePos","guidePosFormat","guidePosStyle","lockGuides","type","width","height","unit","zoom","direction","textAlign","font","segment","mainLineSize","longLineSize","shortLineSize","lineOffset","textOffset","negativeRuler","range","scrollPos","style","backgroundColor","rangeBackgroundColor","lineColor","textColor","textBackgroundColor","textFormat","warpSelf","selectedBackgroundColor","selectedRanges","defaultPixelScale","useResizeObserver","selectedRangesText","selectedRangesTextColor","selectedRangesTextOffset"] = ["className","rulerStyle","snapThreshold","snaps","displayDragPos","cspNonce","dragPosFormat","defaultGuides","showGuides","scrollOptions","guideStyle","guidesOffset","digit","dragGuideStyle","displayGuidePos","guidePosFormat","guidePosStyle","lockGuides","type","width","height","unit","zoom","direction","textAlign","font","segment","mainLineSize","longLineSize","shortLineSize","lineOffset","textOffset","negativeRuler","range","scrollPos","style","backgroundColor","rangeBackgroundColor","lineColor","textColor","textBackgroundColor","textFormat","warpSelf","selectedBackgroundColor","selectedRanges","defaultPixelScale","useResizeObserver","selectedRangesText","selectedRangesTextColor","selectedRangesTextOffset"];
 export const ANGULAR_GUIDES_OUTPUTS: ["changeGuides","requestScroll","dragStart","drag","dragEnd","clickRuler"] = ["changeGuides","requestScroll","dragStart","drag","dragEnd","clickRuler"];

packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.component.ts

@@ -55,6 +55,8 @@ export class NgxGuidesComponent extends NgxGuidesInterface implements AfterViewI
         (options as any)[name] = this[name];
       }
     });
+
+    options.warpSelf = true;
     const guides = new Guides(el, options);
 
     this.guides = guides;

packages/preact-guides/package.json

@@ -35,6 +35,7 @@
         "./*",
         "src/*",
         "dist/*",
+        "declaration/*",
         "README.md"
     ],
     "homepage": "https://daybrush.com/guides",
@@ -58,8 +59,8 @@
         "css-to-mat": "^1.0.3",
         "framework-utils": "^1.1.0",
         "gesto": "^1.13.4",
-        "preact-css-styled": "^1.0.0",
+        "preact-css-styled": "^1.1.2",
         "preact-ruler": "^0.15.0",
-        "react-css-styled": "^1.0.2"
+        "react-css-styled": "^1.1.2"
     }
 }