Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tech/api package #5402

Merged
merged 92 commits into from
Mar 19, 2019
Merged

Tech/api package #5402

merged 92 commits into from
Mar 19, 2019

Conversation

ndelangen
Copy link
Member

Issue: Accessing state and API's is kinda bothersome right now.

This extracts the ManagerProvider & ManagerConsumer into a package called @storybook/api.
The consumer can now be used in other places.

Also I migrated most of it to TypeScript

lib/api/src/index.tsx Outdated Show resolved Hide resolved
lib/api/src/index.tsx Outdated Show resolved Hide resolved
@codecov
Copy link

codecov bot commented Jan 29, 2019

Codecov Report

Merging #5402 into next will decrease coverage by 0.1%.
The diff coverage is 37.5%.

Impacted file tree graph

@@            Coverage Diff             @@
##             next    #5402      +/-   ##
==========================================
- Coverage   38.04%   37.93%   -0.11%     
==========================================
  Files         643      645       +2     
  Lines        9420     9626     +206     
  Branches     1344      352     -992     
==========================================
+ Hits         3584     3652      +68     
- Misses       5268     5927     +659     
+ Partials      568       47     -521
Impacted Files Coverage Δ
addons/a11y/src/components/A11YPanel.tsx 92.59% <ø> (-1.86%) ⬇️
lib/ui/src/index.js 63.63% <ø> (ø) ⬆️
...dons/actions/src/containers/ActionLogger/index.tsx 0% <ø> (ø) ⬆️
lib/ui/src/settings/about_page.js 12.5% <ø> (ø) ⬆️
addons/notes/src/shared.ts 100% <ø> (ø) ⬆️
addons/notes/src/giphy.tsx 35.71% <ø> (ø) ⬆️
addons/links/src/constants.js 0% <ø> (-100%) ⬇️
lib/api/src/index.tsx 0% <0%> (ø)
lib/ui/src/provider.js 0% <0%> (ø) ⬆️
...react-native-server/src/client/manager/provider.js 0% <0%> (ø) ⬆️
... and 240 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b657259...accf970. Read the comment docs.

@ndelangen ndelangen added the maintenance User-facing maintenance tasks label Jan 29, 2019
@benoitdion
Copy link
Member

This will hopefully help restore/simplify some of the ondevice addons. ondevice-backgrounds is mostly broken at the moment because it's still expecting data coming through the websocket when some of the values are in state.

# Conflicts:
#	addons/a11y/package.json
#	addons/actions/package.json
#	addons/backgrounds/package.json
#	addons/cssresources/package.json
#	addons/cssresources/src/css-resource-panel.tsx
#	addons/notes/package.json
#	app/react-native-server/package.json
#	app/react-native-server/src/client/manager/provider.js
#	examples-native/crna-kitchen-sink/package.json
#	lib/addons/package.json
#	lib/ui/package.json
#	yarn.lock
# Conflicts:
#	addons/a11y/package.json
#	addons/actions/package.json
#	addons/backgrounds/package.json
#	addons/cssresources/package.json
#	addons/notes/package.json
#	app/react-native-server/package.json
#	lib/addons/package.json
#	lib/api/src/modules/versions.ts
#	lib/ui/package.json
#	lib/ui/src/core/context.js
@ndelangen
Copy link
Member Author

Seems these tests may be leaking memory:

  • app/react/src/client/preview/index.test.js
  • app/angular/src/client/preview/angular/decorators.test.ts

@ndelangen
Copy link
Member Author

Would like to investigate why some tests take so long

 PASS  lib/ui/src/components/sidebar/treeview/utils.test.js
 PASS  lib/client-api/src/client_api.test.js (5.282s)
 PASS  lib/client-api/src/story_store.test.js
 PASS  lib/core/src/server/presets.test.js
 PASS  lib/cli/lib/add.test.js
 PASS  addons/storysource/src/loader/inject-decorator.test.js (6.218s)
 PASS  addons/knobs/src/components/__tests__/Panel.js (12.486s)
 PASS  lib/ui/src/settings/shortcuts.test.js
 PASS  lib/channels/src/index.test.ts (14.99s)
 PASS  lib/api/src/tests/stories.test.js (15.61s)
 PASS  lib/api/src/tests/versions.test.js (15.903s)
 PASS  app/riot/src/client/preview/render-riot.test.js
 PASS  lib/api/src/tests/url.test.js
 PASS  lib/theming/src/tests/create.test.js
 PASS  lib/api/src/tests/shortcut.test.js
 PASS  app/react/src/server/cra-config.test.js
 PASS  addons/knobs/src/components/__tests__/Options.js
 PASS  app/react/src/client/preview/element_check.test.js
 PASS  lib/components/src/typography/link/link.test.js
 PASS  addons/cssresources/src/css-resource-panel.test.js (21.496s)
 PASS  addons/info/src/components/PropTable.test.js
 PASS  addons/info/src/components/PropTable/index.test.js
 PASS  lib/client-api/src/subscriptions_store.test.js
 PASS  addons/info/src/index.test.js (6.35s)
 PASS  lib/api/src/tests/shortcuts.test.js
 PASS  addons/knobs/src/KnobManager.test.js
 PASS  lib/core/src/client/preview/start.test.js
 PASS  addons/actions/src/preview/__tests__/action.test.js
 PASS  lib/api/src/tests/store.test.js (13.492s)
 PASS  addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.js
 PASS  app/react/src/server/framework-preset-react-docgen.test.js
 PASS  app/angular/src/client/preview/angular/decorators.test.ts
 PASS  lib/core/src/server/utils/merge-webpack-config.test.js
 PASS  lib/router/src/tests/id.test.js
 PASS  addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.js
 PASS  addons/a11y/src/components/A11YPanel.test.js (18.229s)
 PASS  lib/client-logger/src/index.test.ts
 PASS  addons/knobs/src/components/__tests__/Array.js
 PASS  lib/addons/src/make-decorator.test.ts (12.83s)
 PASS  addons/links/src/preview.test.js
 PASS  addons/info/src/components/PropTable/components/Td.test.js
 PASS  addons/ondevice-notes/src/__tests__/index.js
 PASS  lib/core/src/server/utils/template.test.js
 PASS  addons/knobs/src/components/__tests__/RadioButtons.js
 PASS  addons/links/src/react/components/link.test.js
 PASS  addons/knobs/src/components/__tests__/Select.js
 PASS  lib/core/src/server/utils/interpret-files.test.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.configFunc.test.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.async.test.js

 PASS  app/angular/src/server/ts_config.test.js
 PASS  lib/api/src/tests/notifications.test.js
 PASS  lib/cli/lib/detect.test.js

 RUNS  addons/notes/src/Panel.test.js
 PASS  app/angular/src/server/create-fork-ts-checker-plugin.test.js
 PASS  app/react/src/client/preview/index.test.js
 PASS  app/angular/src/server/angular-cli_config.test.js
 PASS  lib/node-logger/src/index.test.ts
 PASS  addons/info/src/components/PropTable/components/Tr.test.js
 PASS  addons/info/src/components/PropTable/components/Th.test.js
 PASS  addons/info/src/components/PropTable/components/Table.test.js
 PASS  addons/info/src/components/PropTable/components/Tbody.test.js
 PASS  addons/info/src/components/PropTable/components/Thead.test.js
 PASS  lib/core-events/src/index.test.ts
 PASS  examples/svelte-kitchen-sink/src/components/Button.test.js
 PASS  lib/client-api/src/pathToid.test.js
 PASS  addons/actions/src/preview/__tests__/configureActions.test.js
 PASS  addons/notes/src/Panel.test.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.specificConfig.test.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.test.js
 PASS  lib/cli/lib/project_types.test.js
 PASS  examples/cra-kitchen-sink/src/storyshots.test.js (7.836s)
 PASS  examples/preact-kitchen-sink/preactshots.test.js
 PASS  examples/html-kitchen-sink/tests/htmlshots.test.js (5.737s)
 PASS  examples/svelte-kitchen-sink/svelteshots.test.js (5.415s)
 PASS  lib/ui/src/__tests__/index.js (6.594s)
 PASS  examples/cra-kitchen-sink/src/App.test.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.shallowWithOptions.test.js
 PASS  lib/codemod/src/transforms/__tests__/move-buildin-addons.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.snapshotWithOptionsFunction.test.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.renderWithOptions.test.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.renderOnly.test.js
 PASS  lib/codemod/src/transforms/__tests__/update-organisation-name.test.js
 PASS  addons/storyshots/storyshots-core/stories/storyshot.shallow.test.js
 PASS  examples/riot-kitchen-sink/riotshots.test.js
 PASS  lib/codemod/src/transforms/__tests__/update-addon-info.test.js
 PASS  examples/vue-kitchen-sink/vueshots.test.js
 PASS  examples/angular-cli/angularshots.test.js (13.303s)
 PASS  examples/official-storybook/tests/storyshots.test.js (22.102s)

@@ -264,7 +264,7 @@ jobs:
at: .
- run:
name: Test
command: yarn test --coverage --runInBand --core
command: yarn test --coverage --w2 --core
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This speeds up the processing of coverage a lot. It's limited to 2 CPUs since that seems to work on CIs best.

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`addon Info should render <Info /> and external markdown 1`] = `
<deprecated>
<Component>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Side-effect of muting the deprecation messages when running tests

componentWillUnmount() {
const { api } = this.props;
api.off(STORY_RENDERED, this.onStoryChange);
const NotesPanel = ({ active }: Props) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addon became state-less 🎉

],
snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer'],
coverageDirectory: 'coverage',
testEnvironment: 'jsdom',
coverageReporters: ['lcov'],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to improve the coverage report massively as well

warning,
});
return deprecatedFn;
jest.mock('util-deprecate', () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deprecate is already mocked, but this changes the implementation

@@ -1,7 +1,7 @@
import { navigator } from 'global';

// The shortcut is our JSON-ifiable representation of a shortcut combination
type Shortcut = string[];
import { KeyCollection, Event } from '../modules/shortcuts';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Jessica-Koch I'm hoping I did the merges correctly, It seems to all work. I hope this is in line with how you want it.

It's all in typescript now 🎉

@Jessica-Koch
Copy link
Contributor

Jessica-Koch commented Mar 19, 2019 via email

@ndelangen ndelangen merged commit 31b8243 into next Mar 19, 2019
@ndelangen ndelangen deleted the tech/api-package branch March 19, 2019 10:03
benoitdion added a commit that referenced this pull request Mar 20, 2019
Following up discussions in #5402, this a proposal for what a typed channel api could look like. Communication via channel is core to the storybook architecture. Adding type safety should help prevent bug and help improve code discovery for new contributors.
const checkDeprecatedThemeOptions = options => {
if (Object.keys(deprecatedThemeOptions).find(key => !!options[key])) {
const checkDeprecatedThemeOptions = (options: Options) => {
if (Object.values(deprecatedThemeOptions).find(v => !!v)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this check intended to do? Looks like it just checks whether deprecatedThemeOptions has some values, which is always true

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it should map deprecated options to themeVars

name: "brandTitle";
url: "brandUrl";

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean that

if (Object.values({name: 'brandTitle', url: 'brandUrl'}).find(v => !!v))

evaluates to

if (['brandTitle', 'brandUrl'].find(v => !!v))

// same as
if ('brandTitle')

// same as
if (true)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core maintenance User-facing maintenance tasks typescript ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants