react-cosmos-native 6.0.0-canary.fe0c7d1.0 → 6.0.0

package/dist/NativeFixtureLoader.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, RendererConfig, UserModuleWrappers } from 'react-cosmos-core';
 type Props = {
     rendererConfig: RendererConfig;
     moduleWrappers: UserModuleWrappers;
     initialFixtureId?: FixtureId;
 };
-export declare function NativeFixtureLoader({ rendererConfig: { playgroundUrl }, moduleWrappers, initialFixtureId, }: Props): JSX.Element;
+export declare function NativeFixtureLoader({ rendererConfig, moduleWrappers, initialFixtureId, }: Props): React.JSX.Element;
 export {};

package/dist/NativeFixtureLoader.js

@@ -1,17 +1,15 @@
 import React from 'react';
-import { createWebSocketsConnect, FixtureConnect, } from 'react-cosmos-core';
+import { ClientFixtureLoader } from 'react-cosmos-renderer/client';
 import * as ReactNative from 'react-native';
-import { getSocketUrl } from './getSocketUrl.js';
+import { NativeRendererProvider } from './NativeRendererProvider.js';
 const { View, Text, StyleSheet } = ReactNative;
-// TODO: Generate unique ID per device
-const rendererId = 'native-renderer';
-export function NativeFixtureLoader({ rendererConfig: { playgroundUrl }, moduleWrappers, initialFixtureId, }) {
-    const socketUrl = getSocketUrl(playgroundUrl);
-    return (React.createElement(FixtureConnect, { rendererId: rendererId, rendererConnect: createWebSocketsConnect(socketUrl), moduleWrappers: moduleWrappers, systemDecorators: [], initialFixtureId: initialFixtureId, renderMessage: renderMessage }));
+export function NativeFixtureLoader({ rendererConfig, moduleWrappers, initialFixtureId, }) {
+    return (React.createElement(NativeRendererProvider, { rendererConfig: rendererConfig, initialFixtureId: initialFixtureId },
+        React.createElement(ClientFixtureLoader, { moduleWrappers: moduleWrappers, renderMessage: renderMessage })));
 }
 function renderMessage(msg) {
     return (React.createElement(View, { style: styles.container },
-        React.createElement(Text, null, msg)));
+        React.createElement(Text, { style: styles.text }, msg)));
 }
 const styles = StyleSheet.create({
     container: {
@@ -20,4 +18,8 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
+    text: {
+        fontSize: 24,
+        fontWeight: '300',
+    },
 });

package/dist/NativeRendererProvider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FixtureId, RendererConfig } from 'react-cosmos-core';
+type Props = {
+    children: React.ReactNode;
+    rendererConfig: RendererConfig;
+    initialFixtureId?: FixtureId | null;
+};
+export declare function NativeRendererProvider({ children, rendererConfig, initialFixtureId, }: Props): React.JSX.Element;
+export {};

package/dist/NativeRendererProvider.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createWebSocketsConnect } from 'react-cosmos-renderer';
+import { StatefulRendererProvider } from 'react-cosmos-renderer/client';
+import { DevSettings } from 'react-native';
+import { getSocketUrl } from './getSocketUrl.js';
+export function NativeRendererProvider({ children, rendererConfig, initialFixtureId = null, }) {
+    const rendererConnect = React.useMemo(() => createWebSocketsConnect(getSocketUrl(rendererConfig.playgroundUrl)), [rendererConfig.playgroundUrl]);
+    return (React.createElement(StatefulRendererProvider
+    // TODO: Generate unique ID per device
+    , { 
+        // TODO: Generate unique ID per device
+        rendererId: "native-renderer", rendererConnect: rendererConnect, locked: false, selectedFixtureId: initialFixtureId, reloadRenderer: reloadRenderer }, children));
+}
+function reloadRenderer() {
+    DevSettings.reload();
+}

package/dist/getSocketUrl.js

@@ -4,8 +4,10 @@ export function getSocketUrl(playgroundUrl) {
     // The URL module isn't implemented fully in React Native and I don't want to
     // bring in another dependency just for this.
     const scriptURL = NativeModules.SourceCode.scriptURL;
-    const [, hostname] = scriptURL.match(/:\/\/(.+?)(:|\/)/);
-    const portMatch = playgroundUrl.match(/:(\d+)(\/|$)/);
-    const port = portMatch ? portMatch[1] : '80';
-    return `ws://${hostname}:${port}`;
+    // https://stackoverflow.com/a/27755/1332513
+    const urlRegex = /^(.*:)\/\/([A-Za-z0-9\-\.]+)(:[0-9]+)?(.*)$/;
+    const [, _protocol, host] = scriptURL.match(urlRegex) || [];
+    const [_url, protocol, _host, port = ':80'] = playgroundUrl.match(urlRegex) || [];
+    const wsProtocol = protocol === 'https:' ? 'wss' : 'ws';
+    return `${wsProtocol}://${host}${port}`;
 }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "react-cosmos-native",
-  "version": "6.0.0-canary.fe0c7d1.0+fe0c7d1",
+  "version": "6.0.0",
   "description": "React Cosmos Native",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-native",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
   "dependencies": {
-    "react-cosmos-core": "6.0.0-canary.fe0c7d1.0+fe0c7d1"
+    "react-cosmos-core": "^6.0.0",
+    "react-cosmos-renderer": "^6.0.0"
   },
-  "gitHead": "fe0c7d1b5b90f48d6109bc18a2750ab2a347d016"
+  "gitHead": "db4fd8fd917598f1f16d4c291be76217436422ee"
 }