@gondel/plugin-react - npm Package Compare versions

Comparing version 1.0.0-alpha.29 to 1.0.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [1.0.0](https://github.com/namics/gondel/compare/v0.1.0...v1.0.0) (2019-11-28)
+
+
+### Bug Fixes
+
+* **core:** prevent plugins from being registered twice when being in different js files ([66aedec](https://github.com/namics/gondel/commit/66aedec)), closes [#48](https://github.com/namics/gondel/issues/48)
+
+
+### BREAKING CHANGES
+
+* **core:** enhances structure of pluginEvents object to track if a plugin (in another js file) has already been initialized
+
+
+
+
+
 # [0.1.0](https://github.com/namics/gondel/compare/v0.0.8...v0.1.0) (2019-04-08)
@@ -8,0 +24,0 @@

dist/index.d.ts

 /**
  * This is a plugin which allows a simplified usage of gondel together with react
  */
-import { GondelBaseComponent } from "@gondel/core";
+import { GondelBaseComponent, GondelComponent } from "@gondel/core";
 import React, { ComponentLifecycle, StatelessComponent, ComponentClass } from "react";
@@ -62,1 +62,3 @@ export declare class GondelReactComponent<State> extends GondelBaseComponent implements ComponentLifecycle<null, State> {
 }
+/** React hook to use Gondel components inside React */
+export declare function useGondelComponent<TComponentType extends GondelComponent>(): readonly [(element: HTMLElement | null) => void, TComponentType | null];

dist/index.js

@@ -17,4 +17,4 @@ var __extends = (this && this.__extends) || (function () {
  */
-import { GondelBaseComponent } from "@gondel/core";
-import React from "react";
+import { GondelBaseComponent, startComponents, stopComponents, getComponentByDomNode, hasMountedGondelComponent } from "@gondel/core";
+import React, { useCallback, useRef, useState, useEffect } from "react";
 import { createRenderAbleAppWrapper } from "./AppWrapper";
@@ -95,2 +95,26 @@ /**
 export { GondelReactComponent };
+/** React hook to use Gondel components inside React */
+export function useGondelComponent() {
+    var _a = useState(null), gondelInstance = _a[0], setGondelInstance = _a[1];
+    var ref = useRef();
+    var refFunction = useCallback(function (element) {
+        if (element) {
+            ref.current = element;
+            startComponents(element).then(function () {
+                setGondelInstance(hasMountedGondelComponent(element) ? getComponentByDomNode(element) : null);
+            });
+        }
+    }, []);
+    useEffect(function () {
+        // Cleanup on unmount
+        return function () {
+            var element = ref.current;
+            if (element) {
+                stopComponents(element);
+                ref.current = undefined;
+            }
+        };
+    }, []);
+    return [refFunction, gondelInstance];
+}
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@gondel/plugin-react",
-  "version": "1.0.0-alpha.29+e86b493",
+  "version": "1.0.0",
   "description": "Gondel Plugin to boot react widgets and apps",
@@ -28,10 +28,10 @@ "bugs": "https://github.com/namics/gondel/issues",
   "devDependencies": {
-    "@gondel/core": "^1.0.0-alpha.29+e86b493",
+    "@gondel/core": "^1.0.0",
     "npm-run-all": "4.1.5",
-    "react": "16.8.3",
-    "react-dom": "16.8.3",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
     "rimraf": "3.0.0",
     "typescript": "3.6.2"
   },
-  "gitHead": "e86b49371c0df21b2e338d3f7a2c4fc448e8b178"
+  "gitHead": "45edacbe40d1307cf4a7471a85554dba385b144d"
 }

README.md

@@ -1,2 +0,2 @@
-# React Lazy Plugin
+# React Plugin
 
@@ -162,1 +162,51 @@ This tiny plugin bootstraps React widgets and apps using Gondel.
 ```
+
+## Using Gondel components from react
+ 
+The `useGondelComponent` hook allows to use a Gondel UI component like an accordion or button inside a react app. 
+
+```js
+import { useGondelComponent } from '@gondel/plugin-react';
+
+const Button = (props) => {
+  const [ref] = useGondelComponent();
+  return (
+    <button ref={ref} data-g-name="Button"></button>
+  );
+};
+```
+
+In addition to the `ref` object an instance of the gondel component is returned.  
+This allows controlling the Gondel component from react.
+
+```js
+// react component
+import { useGondelComponent } from '@gondel/plugin-react';
+
+const Button = (props) => {
+  const [ref, gondelButtonInstance] = useGondelComponent();
+  return (
+    <button onClick={() => {
+        // Ensure that the gondelInstance is already initialized
+        if (gondelButtonInstance) {
+            // Execute a class method from the Gondel component
+            gondelButtonInstance.setIsEnabled(false);
+        }       
+    }} ref={ref} data-g-name="Button"></button>
+  );
+};
+
+// gondel component
+import { Component, GondelBaseComponent } from '@gondel/core';
+
+@Component('Button')
+export class Button extends GondelBaseComponent {
+  setIsEnabled(newState) {
+    if(newState) {
+        this._ctx.removeAttribute('disabled');
+    } else {
+        this._ctx.setAttribute('disabled');
+    }
+  }
+}
+```

src/index.ts

 /**
  * This is a plugin which allows a simplified usage of gondel together with react
  */
-import { GondelBaseComponent } from "@gondel/core";
-import React, { ComponentLifecycle, StatelessComponent, ComponentClass } from "react";
+import {
+  GondelBaseComponent,
+  GondelComponent,
+  startComponents,
+  stopComponents,
+  getComponentByDomNode,
+  hasMountedGondelComponent
+} from "@gondel/core";
+import React, {
+  ComponentLifecycle,
+  StatelessComponent,
+  ComponentClass,
+  useCallback,
+  useRef,
+  useState,
+  useEffect
+} from "react";
 import { createRenderAbleAppWrapper } from "./AppWrapper";
@@ -154,1 +169,28 @@
 }
+
+/** React hook to use Gondel components inside React */
+export function useGondelComponent<TComponentType extends GondelComponent>() {
+  const [gondelInstance, setGondelInstance] = useState<TComponentType | null>(null);
+  const ref = useRef<HTMLElement | undefined>();
+  const refFunction = useCallback((element: HTMLElement | null) => {
+    if (element) {
+      ref.current = element;
+      startComponents(element).then(() => {
+        setGondelInstance(
+          hasMountedGondelComponent(element) ? getComponentByDomNode<TComponentType>(element) : null
+        );
+      });
+    }
+  }, []);
+  useEffect(() => {
+    // Cleanup on unmount
+    return () => {
+      const element = ref.current;
+      if (element) {
+        stopComponents(element);
+        ref.current = undefined;
+      }
+    };
+  }, []);
+  return [refFunction, gondelInstance] as const;
+}

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33797

increased by16.42%

Lines of code

479

increased by16.26%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

212

increased by30.86%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes