Added web support

2026-02-08 00:36:26 +01:00 · 2019-07-05 11:35:56 +02:00
parent 59cb7142e3
commit ffa64f3ef1
11 changed files with 133 additions and 70 deletions
--- a/demo/App.js
+++ b/demo/App.js
@@ -18,7 +18,7 @@ import {
 } from 'react-native-debug-console';

 network.attach();
-log.attach();
+log.attach(true);
 context.hello = () => 'earth';

 console.log('fooo');
--- a/demo/package.json
+++ b/demo/package.json
@@ -16,14 +16,15 @@
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-debug-console": "2.0.0-alpha.1",
-    "react-native-web": "^0.11.4"
+    "react-native-web": "0.11.4"
  },
  "devDependencies": {
    "@babel/runtime": "^7.5.0",
+    "babel-plugin-module-resolver": "^3.2.0",
    "babel-preset-expo": "^5.1.1",
    "expo-cli": "^2.21.2",
    "expo-yarn-workspaces": "^1.2.0",
-    "babel-plugin-module-resolver": "^3.2.0"
+    "react-art": "^16.8.6"
  },
  "private": true
 }
--- a/lib/package.json
+++ b/lib/package.json
@@ -8,12 +8,12 @@
  "license": "MIT",
  "dependencies": {
    "react-native-json-tree": "^1.2.0",
-		"styled-components": "^4.3.1"
+    "styled-components": "^5.0.0-beta.8"
  },
  "peerDependencies": {
-		"prop-types": "^15.6.0",
-		"react": "^16.8.3",
-		"react-native": "^0.59.8"
+    "prop-types": "^15.6.0",
+    "react": "^16.8.3",
+    "react-native": "^0.59.8"
  },
  "devDependencies": {}
 }
--- a/lib/src/components/DevTool/Console/Output.js
+++ b/lib/src/components/DevTool/Console/Output.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, createRef } from 'react';
 import styled from 'styled-components/native';
 import JSONTree from 'react-native-json-tree';
 import {
@@ -102,28 +102,32 @@ const Console = ({
  logs,
  includeStackTrace,
  filter = [],
-}) => (
-  <ScrollView
-    ref={ref => this.scrollView = ref}
-    onContentSizeChange={(contentWidth, contentHeight)=>{        
-        this.scrollView.scrollToEnd({animated: true});
-    }}
-  >
-    <Wrapper>
-      {logs.filter(l => filter.includes(l.type)).map((log, i) => (
-        <Row key={i}>
-          <Emphasis color={getColor(log.type)}>
-            {log.type}
-          </Emphasis>
-          <OutputList
-            items={log.data}
-            includeStackTrace={includeStackTrace}
-            color={getColor(log.type)}
-          />
-        </Row>
-      ))}
-    </Wrapper>
-  </ScrollView>
-);
+}) => {
+  // const ref = createRef();
+  return (
+    <ScrollView
+      onContentSizeChange={(contentWidth, contentHeight)=>{   
+        /*if (ref.current) {     
+          ref.current.scrollView.scrollToEnd({animated: true});
+        }*/
+      }}
+    >
+      <Wrapper>
+        {logs.filter(l => filter.includes(l.type)).map((log, i) => (
+          <Row key={i}>
+            <Emphasis color={getColor(log.type)}>
+              {log.type}
+            </Emphasis>
+            <OutputList
+              items={log.data}
+              includeStackTrace={includeStackTrace}
+              color={getColor(log.type)}
+            />
+          </Row>
+        ))}
+      </Wrapper>
+    </ScrollView>
+  );
+};

 export default Console;
--- a/lib/src/components/DevTool/Modal.js
+++ b/lib/src/components/DevTool/Modal.js
@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
 import {
-  Button,
-  Modal,
  SafeAreaView,
  KeyboardAvoidingView,
 } from 'react-native';
 import events from '../../events';
 import DevTool from './index';
+import Modal from '../base/Modal';


 class Events extends Component {
--- a/lib/src/components/base/Modal/index.js
+++ b/lib/src/components/base/Modal/index.js
@@ -0,0 +1,5 @@
+import {
+  Modal
+} from 'react-native';
+
+export default Modal;
--- a/lib/src/components/base/Modal/index.web.js
+++ b/lib/src/components/base/Modal/index.web.js
@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: fixed;
+  background: #fff;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Modal = ({
+  visible,
+  children
+}) => {
+  const [root, setRoot] = useState();
+  useEffect(() => {
+    const elm = document.createElement('div');
+    document.body.appendChild(elm);
+    setRoot(elm);
+  }, []);
+
+  const elm = visible ? (
+    <Wrapper>{children}</Wrapper>
+  ) : null;
+
+  if (!root) {
+    return null;
+  }
+
+  return createPortal(
+    elm,
+    root,
+  );
+};
+
+export default Modal;
--- a/lib/src/components/base/Toolbar/Selector.js
+++ b/lib/src/components/base/Toolbar/Selector.js
@@ -3,18 +3,15 @@ import {
  SafeAreaView,
  TouchableOpacity,
 } from 'react-native';
-import styled from 'styled-components/native';
 import State from '../../data/State';
 import Button from './Button';
 import Row from '../Row';
 import Icon from '../Icon';
+import Modal from '../Modal';
 import {
  Body,
 } from '../text';

-const Modal = styled.Modal`
-`;
-
 const Selector = ({
  multiSelect = false,
  onSelect,
--- a/lib/src/log.js
+++ b/lib/src/log.js
@@ -27,6 +27,9 @@ class Log {
  }

  log(type, data, keep) {
+    if (data && data[0] && data[0].indexOf && data[0].indexOf('Warning: Using the "className" prop on') === 0) {
+      return;
+    }
    const entry = {
      type,
      data,
@@ -68,9 +71,11 @@ class Log {
      debug: (...data) => this.debug(data, keep),
      verbose: (...data) => this.debug(data, keep),
    };
-    ErrorUtils.setGlobalHandler((err, fatal) => {
-      this.error([err], keep);
-    });
+    if (global.ErrorUtils) {
+      global.ErrorUtils.setGlobalHandler((err, fatal) => {
+        this.error([err], keep);
+      });
+    }
  }

  detach() {
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
  ],
  "scripts": {
    "postinstall": "lerna bootstrap",
-    "demo:ios": "lerna run --scope=react-native-debug-console-demo --stream ios"
+    "demo:ios": "lerna run --scope=react-native-debug-console-demo --stream ios",
+    "demo:web": "lerna run --scope=react-native-debug-console-demo --stream web"
  },
  "devDependencies": {
    "lerna": "^3.0.3"
--- a/yarn.lock
+++ b/yarn.lock
@@ -823,7 +823,7 @@
    "@babel/parser" "^7.4.4"
    "@babel/types" "^7.4.4"

-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.0":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.5.0":
  version "7.5.0"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.0.tgz#4216d6586854ef5c3c4592dab56ec7eb78485485"
  integrity sha512-SnA9aLbyOCcnnbQEGwdfBggnc142h/rbqqsXcaATj2hZcegCl903pUD/lfpsNBlBSuWow/YDfRyJuWi2EPR5cg==
@@ -859,6 +859,11 @@
  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30"
  integrity sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w==

+"@emotion/stylis@^0.8.3":
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"
+  integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==
+
 "@emotion/unitless@^0.7.0":
  version "0.7.4"
  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
@@ -2723,7 +2728,7 @@ arrify@^1.0.0, arrify@^1.0.1:
  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=

-art@^0.10.0:
+art@^0.10.0, art@^0.10.1:
  version "0.10.3"
  resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
  integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
@@ -8577,11 +8582,6 @@ mem@^4.0.0:
    mimic-fn "^2.0.0"
    p-is-promise "^2.0.0"

-memoize-one@^5.0.0:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
-  integrity sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==
-
 memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -8621,7 +8621,7 @@ meow@^4.0.0:
    redent "^2.0.0"
    trim-newlines "^2.0.0"

-merge-anything@^2.2.4:
+merge-anything@^2.2.5:
  version "2.2.5"
  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.2.5.tgz#37ef13f36359ee64f09c657d2cef45f7e29493f9"
  integrity sha512-WgZGR7EQ1D8pyh57uKBbkPhUCJZLGdMzbDaxL4MDTJSGsvtpGdm8myr6DDtgJwT46xiFBlHqxbveDRpFBWlKWQ==
@@ -10798,7 +10798,7 @@ promzard@^0.3.0:
  dependencies:
    read "1"

-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11040,6 +11040,18 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

+react-art@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-art/-/react-art-16.8.6.tgz#66707f8bb20a27147bce47402e38eefc9fd863fd"
+  integrity sha512-viR81SLSrUNF8YCLCdhLKKP3hLMxpyJPzozl0Zq6F3ALKGcynBd92MZHVl1oLkMBvCyS4Qf8s5pandJg34YHxA==
+  dependencies:
+    art "^0.10.1"
+    create-react-class "^15.6.2"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.6"
+
 "react-base16-styling@github:dean177/react-base16-styling#fbc6593":
  version "0.4.6"
  resolved "https://codeload.github.com/dean177/react-base16-styling/tar.gz/fbc6593cc58c5f4662c40b85964c7f9fbcb3984d"
@@ -11130,7 +11142,7 @@ react-google-maps@^9.4.5:
    scriptjs "^2.5.8"
    warning "^3.0.0"

-react-is@^16.6.0, react-is@^16.8.1:
+react-is@^16.8.1:
  version "16.8.6"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
@@ -11189,10 +11201,10 @@ react-native-view-shot@2.6.0:
  resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-2.6.0.tgz#3b23675826f67658366352c4b97b59a6aded2f43"
  integrity sha512-yO9vWi/11m2hEJl8FrW1SMeVzFfPtMKh20MUInGqlsL0H8Ya2JGGlFfrBzx1KiFR2hFb5OdsTLYNtcVZtJ6pLQ==

-react-native-web@^0.11.4:
-  version "0.11.5"
-  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.5.tgz#adf2eff902fdb32e86be7877294d9a6bb0ad3815"
-  integrity sha512-KVvE6s32uBgp5m1BNSfNOXvGo1wt/pORSKvi8oy8tdhAPYqsr0oMuMP3rZd8vk+MpiYt1Z8raS/n+DK2xj85Jg==
+react-native-web@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.4.tgz#86e8158d83a6a41983e43b1c84acaaa342d443b2"
+  integrity sha512-xuiHd9mxtOUlCY/CY8UO25a3cX5u3qsEdhl7zXLDNbJ0nu1Tf98GsplBZgdnDB0q/LpYVPQWmjnTEerncsO2vw==
  dependencies:
    array-find-index "^1.0.2"
    create-react-class "^15.6.2"
@@ -12075,6 +12087,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
    inherits "^2.0.1"
    safe-buffer "^5.0.1"

+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 sharp-cli@1.10.0:
  version "1.10.0"
  resolved "https://registry.yarnpkg.com/sharp-cli/-/sharp-cli-1.10.0.tgz#d201c85303ee66be286051157c2161053860aeb3"
@@ -12686,22 +12703,20 @@ style-loader@^0.23.1:
    loader-utils "^1.1.0"
    schema-utils "^1.0.0"

-styled-components@^4.3.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.2.tgz#4ca81918c812d3006f60ac5fdec7d6b64a9509cc"
-  integrity sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw==
+styled-components@^5.0.0-beta.8:
+  version "5.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0-beta.8.tgz#ad1e672589a891987f5492cbe3ca6f480fcd99dc"
+  integrity sha512-g4MrDmfaoR2jJnA56+JSTFf1ZsDpJYdvTyQSw3HWOHoV/KlCgaSFmU8TrHfTy7DwWQskxyX//IQInNZdn4mGcA==
  dependencies:
    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
    "@emotion/is-prop-valid" "^0.8.1"
+    "@emotion/stylis" "^0.8.3"
    "@emotion/unitless" "^0.7.0"
    babel-plugin-styled-components ">= 1"
    css-to-react-native "^2.2.2"
-    memoize-one "^5.0.0"
-    merge-anything "^2.2.4"
-    prop-types "^15.5.4"
-    react-is "^16.6.0"
-    stylis "^3.5.0"
+    merge-anything "^2.2.5"
+    shallowequal "^1.1.0"
    stylis-rule-sheet "^0.0.10"
    supports-color "^5.5.0"

@@ -12719,11 +12734,6 @@ stylis-rule-sheet@^0.0.10:
  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==

-stylis@^3.5.0:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-
 subscriptions-transport-ws@0.9.8:
  version "0.9.8"
  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.8.tgz#3a26ab96e06f78cf4ace8d083f6227fa55970947"