react-cosmos - npm Package Compare versions

Comparing version 1.0.0-beta.5 to 1.0.0-beta.8

lib/index.js

@@ -44,2 +44,3 @@ 'use strict';
   var fixtures = _ref.fixtures;
+  var containerQuerySelector = _ref.containerQuerySelector;
 
@@ -52,4 +53,6 @@ var firstProxy = (0, _linkedList2.default)([].concat(_toConsumableArray(proxies), [
 
+  var container = containerQuerySelector ? document.querySelector(containerQuerySelector) : document.body.appendChild(document.createElement('div'));
+
   return new _reactQuerystringRouter2.default.Router({
-    container: document.body.appendChild(document.createElement('div')),
+    container: container,
     defaultProps: {
@@ -56,0 +59,0 @@ firstProxy: firstProxy,

lib/proxies/StateProxy.js

@@ -139,3 +139,3 @@ 'use strict';
         // TODO: No longer omit when props will be read from fixture.props
-        // https://github.com/skidding/react-cosmos/issues/217
+        // https://github.com/react-cosmos/react-cosmos/issues/217
 
@@ -142,0 +142,0 @@ var childFixture = disableLocalState ? fixture : (0, _lodash2.default)(fixture, 'state');

package.json

 {
   "name": "react-cosmos",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.8",
   "description": "The glue between the React Cosmos modules",
-  "repository": "https://github.com/skidding/react-cosmos/tree/master/packages/react-cosmos",
+  "repository": "https://github.com/react-cosmos/react-cosmos/tree/master/packages/react-cosmos",
   "license": "MIT",
@@ -11,5 +11,5 @@ "main": "lib/index.js",
     "lodash.omit": "^4.5.0",
-    "react-component-playground": "^1.0.0-beta.5",
-    "react-component-tree": "^1.0.0-beta.5",
-    "react-querystring-router": "^1.0.0-beta.5"
+    "react-component-playground": "^1.0.0-beta.8",
+    "react-component-tree": "^1.0.0-beta.8",
+    "react-querystring-router": "^1.0.0-beta.8"
   },
@@ -16,0 +16,0 @@ "peerDependencies": {

src/__tests__/index.js

@@ -24,47 +24,98 @@ const FakeRouter = jest.fn();
 
-const routerInstance = startReactCosmos({
-  proxies: fakeProxies,
-  components: fakeComponentsInput,
-  fixtures: fakeFixturesInput,
-});
+let routerInstance;
 
-it('uses Componet Playground as router component class', () => {
-  const { getComponentClass } = FakeRouter.mock.calls[0][0];
-  expect(getComponentClass()).toBe(FakeComponentPlayground);
-});
+const initRouter = (options) => {
+  jest.clearAllMocks();
+  routerInstance = startReactCosmos(options);
+};
 
-it('create proxy list with user proxies', () => {
-  expect(createLinkedList.mock.calls[0][0][0]).toBe(fakeProxies[0]);
-  expect(createLinkedList.mock.calls[0][0][1]).toBe(fakeProxies[1]);
-});
+const commonTests = () => {
+  it('uses Componet Playground as router component class', () => {
+    const { getComponentClass } = FakeRouter.mock.calls[0][0];
+    expect(getComponentClass()).toBe(FakeComponentPlayground);
+  });
 
-it('end proxy list with internal proxies', () => {
-  expect(createLinkedList.mock.calls[0][0][3]).toBe(PreviewLoader);
-});
+  it('create proxy list with user proxies', () => {
+    expect(createLinkedList.mock.calls[0][0][0]).toBe(fakeProxies[0]);
+    expect(createLinkedList.mock.calls[0][0][1]).toBe(fakeProxies[1]);
+  });
 
-it('sends proxy list to Component Playground props', () => {
-  const { firstProxy } = FakeRouter.mock.calls[0][0].defaultProps;
-  expect(firstProxy).toBe(fakeLinkedList);
-});
+  it('end proxy list with internal proxies', () => {
+    expect(createLinkedList.mock.calls[0][0][3]).toBe(PreviewLoader);
+  });
 
-it('sends components input to loadComponents lib', () => {
-  expect(fakeLoadComponents.mock.calls[0][0]).toBe(fakeComponentsInput);
-});
+  it('sends proxy list to Component Playground props', () => {
+    const { firstProxy } = FakeRouter.mock.calls[0][0].defaultProps;
+    expect(firstProxy).toBe(fakeLinkedList);
+  });
 
-it('sends fixtures input to loadFixtures lib', () => {
-  expect(fakeLoadFixtures.mock.calls[0][0]).toBe(fakeFixturesInput);
-});
+  it('sends components input to loadComponents lib', () => {
+    expect(fakeLoadComponents.mock.calls[0][0]).toBe(fakeComponentsInput);
+  });
 
-it('sends components output to Component Playground props', () => {
-  const { components } = FakeRouter.mock.calls[0][0].defaultProps;
-  expect(components).toBe(fakeComponentsOutput);
-});
+  it('sends fixtures input to loadFixtures lib', () => {
+    expect(fakeLoadFixtures.mock.calls[0][0]).toBe(fakeFixturesInput);
+  });
 
-it('sends fixtures output to Component Playground props', () => {
-  const { fixtures } = FakeRouter.mock.calls[0][0].defaultProps;
-  expect(fixtures).toBe(fakeFixturesOutput);
+  it('sends components output to Component Playground props', () => {
+    const { components } = FakeRouter.mock.calls[0][0].defaultProps;
+    expect(components).toBe(fakeComponentsOutput);
+  });
+
+  it('sends fixtures output to Component Playground props', () => {
+    const { fixtures } = FakeRouter.mock.calls[0][0].defaultProps;
+    expect(fixtures).toBe(fakeFixturesOutput);
+  });
+
+  it('returns router instance', () => {
+    expect(routerInstance).toBeInstanceOf(FakeRouter);
+  });
+};
+
+describe('without container query selector', () => {
+  beforeAll(() => {
+    initRouter({
+      proxies: fakeProxies,
+      components: fakeComponentsInput,
+      fixtures: fakeFixturesInput,
+    });
+  });
+
+  commonTests();
+
+  it('uses element inside document body for router container', () => {
+    const { container } = FakeRouter.mock.calls[0][0];
+    expect(container.parentNode).toBe(document.body);
+  });
 });
 
-it('returns router instance', () => {
-  expect(routerInstance).toBeInstanceOf(FakeRouter);
+describe('with container query selector', () => {
+  let rootEl;
+
+  beforeAll(() => {
+    rootEl = window.document.createElement('div', { id: 'root' });
+    rootEl.id = 'app';
+    document.body.appendChild(rootEl);
+
+    initRouter({
+      proxies: fakeProxies,
+      components: fakeComponentsInput,
+      fixtures: fakeFixturesInput,
+      containerQuerySelector: '#app',
+    });
+  });
+
+  afterAll(() => {
+    document.body.removeChild(rootEl);
+  });
+
+  commonTests();
+
+  it('uses queried element for router container', () => {
+    const { container } = FakeRouter.mock.calls[0][0];
+    // For some reason expect(container).toBe(rootEl) fills up the memory until
+    // it reaches a V8 limit and crashes due to allocation fail. Probably when
+    // pretty-format is used to display the pretty diff
+    expect(container === rootEl).toBe(true);
+  });
 });

src/index.js

@@ -23,2 +23,3 @@ import ReactQuerystringRouter from 'react-querystring-router';
   fixtures,
+  containerQuerySelector,
 }) => {
@@ -33,4 +34,8 @@ const firstProxy = createLinkedList([
 
+  const container = containerQuerySelector ?
+    document.querySelector(containerQuerySelector) :
+    document.body.appendChild(document.createElement('div'));
+
   return new ReactQuerystringRouter.Router({
-    container: document.body.appendChild(document.createElement('div')),
+    container,
     defaultProps: {
@@ -37,0 +42,0 @@ firstProxy,

src/proxies/PreviewLoader.jsx

@@ -13,3 +13,3 @@ import React from 'react';
       // TODO: Redesign fixture to read props from fixture.props (vs from root)
-      // https://github.com/skidding/react-cosmos/issues/217
+      // https://github.com/react-cosmos/react-cosmos/issues/217
       ...omit(fixture, ['component']),
@@ -16,0 +16,0 @@ ref: onPreviewRef,

src/proxies/StateProxy.jsx

@@ -98,3 +98,3 @@ import React from 'react';
       // TODO: No longer omit when props will be read from fixture.props
-      // https://github.com/skidding/react-cosmos/issues/217
+      // https://github.com/react-cosmos/react-cosmos/issues/217
       const childFixture = disableLocalState ? fixture : omit(fixture, 'state');
@@ -101,0 +101,0 @@

New alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

40253

decreased by-66.69%

Number of package files

20

decreased by-45.95%

Lines of code

1097

decreased by-26.23%

Dependency changes

• Updatedreact-component-playground@^1.0.0-beta.8

• Updatedreact-component-tree@^1.0.0-beta.8

• Updatedreact-querystring-router@^1.0.0-beta.8