shilman

⚠️ Warning: this document is out of date.

For the most recent webpack5 instructions see MIGRATION.md.

Storybook experimental Webpack 5 support

Storybook 6.2 includes experimental Webpack 5 support. Webpack 5 brings a variety of performance improvements, as well as exciting new features like module federation. Here's a quick guide to get you going.

Intro

jonathantneal

Fetching Web Platform Data in NodeJS

Should there be a need to fetch web platform data in NodeJS, here are some dependency-less functions that will return feature data from W3C, CanIUse, and MDN Browser Compatibility Data.

Dependency-Free Fetching in NodeJS

NodeJS includes an http and https library which can perform network requests.

const https = require('https')

christian-bromann

Run Chrome headless

The good old PhantomJS times are over. The project is not maintained anymore and it is recommended to switch over to Chrome headless. Just run a local Selenium standalone server:

$ java -jar Sites/selenium-server-standalone-3.4.0.jar

FezVrasta

import React, { Component, PropTypes } from 'react';
import PopperJS from 'popper.js';

export default class Popper extends Component {
  state = {}

  update = () => {
    if (this.popperInstance) {
      this.popperInstance.scheduleUpdate();
    }

tomazzaman

import fs from 'fs';
import path, { resolve } from 'path';
import assert from 'assert';
import Module from 'module';
import jsdom from 'jsdom';
import Mocha from 'mocha';
import chokidar from 'chokidar';

// Let's import and globalize testing tools so
// there's no need to require them in each test

crossbrowsertesting

var webdriverio = require('webdriverio');

var webdriverio = 
    client = webdriverio.remote({
        desiredCapabilities: {
			name : 'Selenium Test Example',
			build :  '1.0',

			browser_api_name : 'FF35', 
			os_api_name : 'WinXPSP2-C2', 

imjasonh

* {
    font-size: 12pt;
    font-family: monospace;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: black;
    cursor: default;
}

Couto

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var folders = {
    APP: path.resolve(__dirname, '../app'),
    BUILD: path.resolve(__dirname, '../build'),
    BOWER: path.resolve(__dirname, '../bower_components'),
    NPM: path.resolve(__dirname, '../node_modules')
};

fredrick

var React = require('react/addons'),
    TestUtils = React.addons.TestUtils,
    TestContext = require('./TestContext'),
    App = require('./App.jsx'),
    app = TestContext.getRouterComponent(App);

describe('App', function() {
    it('has something', function() {
        expect(app.getDOMNode().textContent).toContain('something');
    });

qubyte

// brfs is needed to use this anti-shim.
var fs = require('fs');
var functionBody = [
  'var window = {};',
  fs.readFileSync(__dirname + '/path/to/node_modules/fetch/fetch.js', 'utf8'), // Fix the path for your needs.
  'return window.fetch;'
].join('\n');

// Assigns a function fetch function to module.exports. Here I elect to use a native Promise implementation (or
// polyfilled). This is trivial to adapt into a library that can take a user defined Promise.