From afc8d4138898c5be845930ff16c4b2ac74453261 Mon Sep 17 00:00:00 2001 From: Michelle Chen Date: Wed, 3 Jun 2020 14:29:48 -0400 Subject: [PATCH] =?UTF-8?q?=E2=9C=96=EF=B8=8F=20deprecate=20react-server-w?= =?UTF-8?q?ebpack-plugin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .travis.yml | 4 +- README.md | 2 +- gems/quilt_rails/CHANGELOG.md | 2 + gems/quilt_rails/README.md | 12 +- gems/quilt_rails/docs/manual-installation.md | 2 +- packages/react-router/README.md | 2 +- .../react-server-webpack-plugin/CHANGELOG.md | 4 + .../react-server-webpack-plugin/README.md | 4 + .../react-server-webpack-plugin/package.json | 39 ---- .../react-server-webpack-plugin/src/index.ts | 1 - .../react-server-webpack-plugin/tsconfig.json | 16 -- packages/react-server/CHANGELOG.md | 6 +- packages/react-server/README.md | 2 +- packages/react-server/docs/webpack-plugin.md | 179 ++++++++++++++++++ packages/react-server/package.json | 12 +- .../react-server/src/webpack-plugin/index.ts | 1 + .../test/utilities/workspace.ts | 0 .../test/webpack-plugin.test.ts} | 12 +- .../src/webpack-plugin}/transforms.ts | 0 .../src/webpack-plugin/webpack-plugin.ts} | 2 +- packages/react-server/webpack-plugin.d.ts | 1 + packages/react-server/webpack-plugin.js | 1 + packages/tsconfig.json | 1 - yarn.lock | 2 +- 24 files changed, 228 insertions(+), 79 deletions(-) delete mode 100644 packages/react-server-webpack-plugin/package.json delete mode 100644 packages/react-server-webpack-plugin/src/index.ts delete mode 100644 packages/react-server-webpack-plugin/tsconfig.json create mode 100644 packages/react-server/docs/webpack-plugin.md create mode 100644 packages/react-server/src/webpack-plugin/index.ts rename packages/{react-server-webpack-plugin/src => react-server/src/webpack-plugin}/test/utilities/workspace.ts (100%) rename packages/{react-server-webpack-plugin/src/test/react-server-webpack-plugin.test.ts => react-server/src/webpack-plugin/test/webpack-plugin.test.ts} (97%) rename packages/{react-server-webpack-plugin/src => react-server/src/webpack-plugin}/transforms.ts (100%) rename packages/{react-server-webpack-plugin/src/react-server-webpack-plugin.ts => react-server/src/webpack-plugin/webpack-plugin.ts} (98%) create mode 100644 packages/react-server/webpack-plugin.d.ts create mode 100644 packages/react-server/webpack-plugin.js diff --git a/.travis.yml b/.travis.yml index ed69cb49e6..ee32f03bc1 100644 --- a/.travis.yml +++ b/.travis.yml @@ -16,11 +16,11 @@ matrix: name: 'Node - build, type-check, and end-to-end tests' script: - yarn build --verbose - - yarn test:ci --testPathPattern react-server-webpack-plugin address + - yarn test:ci --testPathPattern react-server address - <<: *node_container name: 'Node - unit tests' script: - - yarn test:ci --testPathIgnorePatterns react-server-webpack-plugin address + - yarn test:ci --testPathIgnorePatterns react-server address - yarn codecov - <<: *node_container name: 'Node - lint' diff --git a/README.md b/README.md index b4008d982b..571b7a6159 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,7 @@ Each package has its own `README` and documentation describing usage. | koa-shopify-graphql-proxy | [directory](packages/koa-shopify-graphql-proxy) | [![npm version](https://badge.fury.io/js/%40shopify%2Fkoa-shopify-graphql-proxy.svg)](https://badge.fury.io/js/%40shopify%2Fkoa-shopify-graphql-proxy) | | koa-shopify-webhooks | [directory](packages/koa-shopify-webhooks) | [![npm version](https://badge.fury.io/js/%40shopify%2Fkoa-shopify-webhooks.svg)](https://badge.fury.io/js/%40shopify%2Fkoa-shopify-webhooks) | | logger | [directory](packages/logger) | [![npm version](https://badge.fury.io/js/%40shopify%2Flogger.svg)](https://badge.fury.io/js/%40shopify%2Flogger) | +| magic-entries-webpack-plugin | [directory](packages/magic-entries-webpack-plugin) | [![npm version](https://badge.fury.io/js/%40shopify%2Fmagic-entries-webpack-plugin.svg)](https://badge.fury.io/js/%40shopify%2Fmagic-entries-webpack-plugin) | | mime-types | [directory](packages/mime-types) | [![npm version](https://badge.fury.io/js/%40shopify%2Fmime-types.svg)](https://badge.fury.io/js/%40shopify%2Fmime-types) | | network | [directory](packages/network) | [![npm version](https://badge.fury.io/js/%40shopify%2Fnetwork.svg)](https://badge.fury.io/js/%40shopify%2Fnetwork) | | performance | [directory](packages/performance) | [![npm version](https://badge.fury.io/js/%40shopify%2Fperformance.svg)](https://badge.fury.io/js/%40shopify%2Fperformance) | @@ -76,7 +77,6 @@ Each package has its own `README` and documentation describing usage. | react-performance | [directory](packages/react-performance) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-performance.svg)](https://badge.fury.io/js/%40shopify%2Freact-performance) | | react-router | [directory](packages/react-router) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-router.svg)](https://badge.fury.io/js/%40shopify%2Freact-router) | | react-server | [directory](packages/react-server) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-server.svg)](https://badge.fury.io/js/%40shopify%2Freact-server) | -| react-server-webpack-plugin | [directory](packages/react-server-webpack-plugin) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-server-webpack-plugin.svg)](https://badge.fury.io/js/%40shopify%2Freact-server-webpack-plugin) | | react-shortcuts | [directory](packages/react-shortcuts) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-shortcuts.svg)](https://badge.fury.io/js/%40shopify%2Freact-shortcuts) | | react-testing | [directory](packages/react-testing) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-testing.svg)](https://badge.fury.io/js/%40shopify%2Freact-testing) | | react-tracking-pixel | [directory](packages/react-tracking-pixel) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-tracking-pixel.svg)](https://badge.fury.io/js/%40shopify%2Freact-tracking-pixel) | diff --git a/gems/quilt_rails/CHANGELOG.md b/gems/quilt_rails/CHANGELOG.md index edb62ca489..33e07fb014 100644 --- a/gems/quilt_rails/CHANGELOG.md +++ b/gems/quilt_rails/CHANGELOG.md @@ -33,6 +33,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Add: Expose a `data` argument on `render_react` to share data to the React server using the `X-Quilt-Data` header ([#1411](https://github.com/Shopify/quilt/pull/1411)) +⚠️ this change has the minimal requirement of `@shopify/react-server` v0.12.0 and `@shopify/react-server-webpack-plugin` v3.0.0 (or `@shopify/sewing-kit` v0.128.0) + ## [1.11.1] - 2020-03-24 - add `allowed_push_host` in gemspec that is required to publish diff --git a/gems/quilt_rails/README.md b/gems/quilt_rails/README.md index bf3cf1d48b..abe58ed454 100644 --- a/gems/quilt_rails/README.md +++ b/gems/quilt_rails/README.md @@ -23,7 +23,7 @@ A turn-key solution for integrating Quilt client-side libraries into your Rails ## Server-side-rendering -🗒 This guide is focused on internal Shopify developers with access to [`dev`](https://github.com/Shopify/dev) and [@shopify/sewing-kit](https://github.com/Shopify/sewing-kit). A similar setup can be achieved using the [manual installation](./docs/manual-installation) , and following the [react-server-webpack-plugin](../../packages/react-server-webpack-plugin/README.md) guide. Apps not running on Shopify infrastructure should [disable server-side GraphQL queries](./docs/FAQ.md) to avoid scalability issue. +🗒 This guide is focused on internal Shopify developers with access to [`dev`](https://github.com/Shopify/dev) and [@shopify/sewing-kit](https://github.com/Shopify/sewing-kit). A similar setup can be achieved using the [manual installation](./docs/manual-installation.md) , and following the [react-server webpack plugin](../../packages/react-server/README.md#webpack-plugin) guide. Apps not running on Shopify infrastructure should [disable server-side GraphQL queries](./docs/FAQ.md) to avoid scalability issue. ### Quick start @@ -61,7 +61,7 @@ Will run the application, starting up both servers and compiling assets. ### Manual installation -Follow [this guide](./docs/manual-installation) on how to do manual setup without the generator. +Follow [this guide](./docs/manual-installation.md) on how to do manual setup without the generator. ### Advanced use @@ -222,7 +222,7 @@ With SSR enabled React apps, state must be serialized on the server and deserial #### Customizing the Node server -By default, sewing-kit bundles in [`@shopify/react-server-webpack-plugin`](../../packages/react-server-webpack-plugin/README.md) for `quilt_rails` applications to get apps up and running fast without needing to manually write any Node server code. +By default, sewing-kit bundles in [`@shopify/react-server/webpack-plugin`](../../packages/react-server/README.md#webpack-plugin) for `quilt_rails` applications to get apps up and running fast without needing to manually write any Node server code. If what it provides is not sufficient, a completely custom server can be defined by adding a `server.js` or `server.ts` file to the `app/ui` folder. The simplest way to customize the server is to export the object created by [`@shopify/react-server`](../../packages/react-server/README.md#node-usage)'s `createServer` call in `server.ts` file. @@ -280,12 +280,12 @@ end ## Performance tracking a React app To setup performance tracking with your React app with `quilt_rails`. -Follow details guide [here](./docs/performance-tracking). +Follow details guide [here](./docs/performance-tracking.md). ## API -Find all features this gem offer in this [API doc](./docs/api). +Find all features this gem offer in this [API doc](./docs/api.md). ## FAQ -Find your [here](./docs/FAQ). +Find your [here](./docs/FAQ.md). diff --git a/gems/quilt_rails/docs/manual-installation.md b/gems/quilt_rails/docs/manual-installation.md index 6edc49dd8b..e33658111a 100644 --- a/gems/quilt_rails/docs/manual-installation.md +++ b/gems/quilt_rails/docs/manual-installation.md @@ -27,7 +27,7 @@ yarn add typescript @types/react @types/react-dom ``` 🗒️ Ignore `sewing_kit` and `@shopify/sewing-kit` dependencies if you don't have access to it. -Instead, make sure to use [`react-server-webpack-plugin`](../../packages/react-server-webpack-plugin/README.md) with your webpack configuration. +Instead, make sure to use [`react-server webpack plugin`](../../../packages/react-server/README.md#webpack-plugin) with your webpack configuration. ##### Define typescript config diff --git a/packages/react-router/README.md b/packages/react-router/README.md index a3e2cf263a..ce0b17fd86 100644 --- a/packages/react-router/README.md +++ b/packages/react-router/README.md @@ -19,7 +19,7 @@ Rendering the `Router` component at the top-level of your application will creat This value should be derived from the server-side Node http request object. If you are rendering your app with a Node based web framework (such as [Koa](https://koajs.com/#request) or [Express](http://expressjs.com/en/5x/api.html#req)), there will be a standard convention for accessing this object within the lifecycle of each request to your server. -A typical application will have a middleware within their application chain that is responsible for rendering the React tree, and providing your main App component the `location` prop. It can then delegate this value to the `Router` on the `location` prop. We also provide a simple library, [`@shopify/react-server`](../packages/react-server), for React server-side rendering. +A typical application will have a middleware within their application chain that is responsible for rendering the React tree, and providing your main App component the `location` prop. It can then delegate this value to the `Router` on the `location` prop. We also provide a simple library, [`@shopify/react-server`](../react-server/README.md), for React server-side rendering. ```tsx import React from 'react'; diff --git a/packages/react-server-webpack-plugin/CHANGELOG.md b/packages/react-server-webpack-plugin/CHANGELOG.md index 0739b12fef..f987c83bd7 100644 --- a/packages/react-server-webpack-plugin/CHANGELOG.md +++ b/packages/react-server-webpack-plugin/CHANGELOG.md @@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +## ❗️ Deprecated on version 3.1.0 ❗️ + +**Note**: This module is now deprecated and included as part of [`@shopify/react-server`](../react-server/README.md#webpack-plugin). + ## [3.1.0] - 2020-05-29 diff --git a/packages/react-server-webpack-plugin/README.md b/packages/react-server-webpack-plugin/README.md index 5e1e9f77bd..97fabfd55e 100644 --- a/packages/react-server-webpack-plugin/README.md +++ b/packages/react-server-webpack-plugin/README.md @@ -3,6 +3,10 @@ [![Build Status](https://travis-ci.org/Shopify/quilt.svg?branch=master)](https://travis-ci.org/Shopify/quilt) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-server-webpack-plugin.svg)](https://badge.fury.io/js/%40shopify%2Freact-server-webpack-plugin.svg) +## ❗️ Deprecated on version 3.1.0 ❗️ + +**Note**: This module is now deprecated and included as part of [`@shopify/react-server`](../react-server/README.md#webpack-plugin). + A webpack plugin which generates "virtual" in-memory entrypoints for `@shopify/react-server` based applications. This plugin allows you to run a universal React application without needing any client/server-specific code. ## Installation diff --git a/packages/react-server-webpack-plugin/package.json b/packages/react-server-webpack-plugin/package.json deleted file mode 100644 index 675404f2d7..0000000000 --- a/packages/react-server-webpack-plugin/package.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "name": "@shopify/react-server-webpack-plugin", - "version": "3.1.0", - "license": "MIT", - "description": "A webpack plugin that generates entrypoints for @shopify/react-server based applications", - "main": "dist/src/index.js", - "types": "dist/src/index.d.ts", - "scripts": { - "build": "tsc --p tsconfig.json" - }, - "sideEffects": false, - "publishConfig": { - "access": "public", - "@shopify:registry": "https://registry.npmjs.org" - }, - "author": "Shopify Inc.", - "repository": { - "type": "git", - "url": "git+https://github.com/Shopify/quilt.git", - "directory": "packages/react-server-webpack-plugin" - }, - "bugs": { - "url": "https://github.com/Shopify/quilt/issues" - }, - "homepage": "https://github.com/Shopify/quilt/blob/master/packages/react-server-webpack-plugin/README.md", - "dependencies": { - "@babel/types": ">=7.0.0", - "webpack-virtual-modules": "^0.2.2" - }, - "devDependencies": { - "@shopify/react-server": "^0.12.2", - "@types/webpack-virtual-modules": "^0.1.0", - "webpack": ">4.25.1, <=4.5.0" - }, - "files": [ - "dist/*", - "!tsconfig.tsbuildinfo" - ] -} diff --git a/packages/react-server-webpack-plugin/src/index.ts b/packages/react-server-webpack-plugin/src/index.ts deleted file mode 100644 index 8e6b89a4ed..0000000000 --- a/packages/react-server-webpack-plugin/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {ReactServerPlugin} from './react-server-webpack-plugin'; diff --git a/packages/react-server-webpack-plugin/tsconfig.json b/packages/react-server-webpack-plugin/tsconfig.json deleted file mode 100644 index 2d9486293f..0000000000 --- a/packages/react-server-webpack-plugin/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig_base.json", - "compileOnSave": false, - "compilerOptions": { - "outDir": "./dist", - "baseUrl": ".", - "rootDir": "." - }, - "include": [ - "../../config/typescript/**/*", - "./src/**/*.ts", - "./src/**/*.tsx" - ], - "exclude": ["**/*.test.ts", "**/*.test.tsx"], - "references": [{"path": "../react-server"}] -} diff --git a/packages/react-server/CHANGELOG.md b/packages/react-server/CHANGELOG.md index 3054836cd3..4d609fb207 100644 --- a/packages/react-server/CHANGELOG.md +++ b/packages/react-server/CHANGELOG.md @@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). - +## [Unreleased] + +### Changed + +- Move `react-server-webpack-plugin` into `react-server` and expose it from `@shopify/react-server/webpack-plugin` ([#1489](https://github.com/Shopify/quilt/pull/1489)) ## [0.12.0] - 2020-05-12 diff --git a/packages/react-server/README.md b/packages/react-server/README.md index 8cafe2ef13..5e0a3dc83c 100644 --- a/packages/react-server/README.md +++ b/packages/react-server/README.md @@ -51,7 +51,7 @@ If you already have an existing node server, you can opt in to using only the re ## Webpack Plugin -We also provide a [webpack plugin](https://github.com/Shopify/quilt/blob/master/packages/react-server-webpack-plugin) to automatically generate the server and client entries for an application. +We also provide a [webpack plugin](./docs/webpack-plugin) to automatically generate the server and client entries for an application. ### Deployment (Shopify specific) diff --git a/packages/react-server/docs/webpack-plugin.md b/packages/react-server/docs/webpack-plugin.md new file mode 100644 index 0000000000..980c2a4eb6 --- /dev/null +++ b/packages/react-server/docs/webpack-plugin.md @@ -0,0 +1,179 @@ +# React Server Webpack Plugin + +A webpack plugin which generates "virtual" in-memory entrypoints for `@shopify/react-server` based applications. This plugin allows you to run a universal React application without needing any client/server-specific code. + +## Usage + +### With sewing-kit + +As of version [0.102.0](https://github.com/Shopify/sewing-kit/blob/big-docs-update/CHANGELOG.md#L35) `sewing-kit` consumes this plugin by default if you have `@shopify/react-server` in your `package.json`. + +For detailed instructions on usage with Rails and sewing-kit see the documentation for [quilt_rails](/gems/quilt_rails/README.md). + +### Without sewing-kit + +First you will need to install all of the dependencies you'll need for your application + +```sh +yarn add react react-dom +yarn add webpack @shopify/react-server @shopify/webpack-asset-metadata-plugin --dev +``` + +Since `@shopify/react-server` relies on `@shopify/webpack-asset-metadata-plugin`, you will need to setup both plugins in your webpack configuration. A simple starter (not production optimized) webpack setup is as follows: + +```tsx +// webpack.config.js + +const {ReactServerPlugin} = require('@shopify/react-server/webpack-plugin'); +const {AssetMetadataPlugin} = require('@shopify/webpack-asset-metadata-plugin'); + +const universal = { + mode: 'development', + optimization: { + minimize: false, + }, + plugins: [new AssetMetadataPlugin(), new ReactServerPlugin()], +}; + +const server = { + ...universal, + name: 'server', + target: 'node', + entry: './server', + externals: [ + (context, request, callback) => { + if (/node_modules/.test(context)) { + return callback(null, `commonjs ${request}`); + } + callback(); + }, + ], +}; + +const client = { + ...universal, + name: 'client', + target: 'web', + entry: './client', +}; + +module.exports = [server, client]; +``` + +By default, this plugin expects the entrypoint to your application to be in the root directory. + +```jsx +// index.jsx +import React from 'react'; + +export default function App() { + return
I am an app
; +} +``` + +Next you can run `webpack && node dist/server.js`. When the server starts up you should see: + +```sh +started react-server on localhost:PORT +``` + +If you point your browser at `localhost:PORT` you should see "I am an app". :) + +### Automatic Props + +The plugin passes some props to your application automatically. + +```typescript +interface DefaultProps { + /* + The full WHATWG URL object for the initial request. On the client this will *not* update reactively. It is always the URL for the initial request. + */ + url: URL; + + /* + An object containing any data sent via the `x-quilt-data` header. + This header is used by `quilt_rails` for sending data directly from ruby to React. + */ + data: Record; +} +``` + +These props are provided during both server-side and client-side rendering, so they can be used without any special logic around what environment your app is in. + +These props can be used to feed initial data into your application for use with libraries such as `react-router`, as well as for simple app logic. + +```tsx +// index.jsx +import React from 'react'; + +export default function App({url, data}: {url: Url, data: Record}) { + const {href} = url; + if (href.endsWith('/about')) { + return
this is an about page
; + } + + return ( +
+ I am an app, here are some items: +
    + {data.items.forEach(({content, id}) => ( +
  • {content}
    • ; + ))} +
+
+ ); +} +``` + +### API + +The plugin is exported as a named export. + +```tsx +import {ReactServerPlugin} from '@shopify/react-server/webpack-plugin'; +``` + +It accepts a configuration object with the following interface: + +```tsx +interface Options { + /* + The base-path to use for the `client.js` and `server.js` virtual entry files, + this should also be where your index.tsx/jsx is. + + default: '.' + */ + + basePath: string; + + /* + The host to use when calling `createServer` from `@shopify/react-server`, + this should also be where your index.tsx/jsx is. + + default: process.env.REACT_SERVER_IP || "localhost" + */ + host: string; + + /* + The port to use when calling `createServer` from `@shopify/react-server` + + default: process.env.REACT_SERVER_PORT || 8081 + */ + port: number; + + /* + The assetPrefix to use when calling `createServer` from `@shopify/react-server`. + + default: process.env.CDN_URL || "localhost:8080/assets/webpack" + */ + assetPrefix: string; +} +``` + +An example configuration for a `sewing-kit` app named `cool-app` might look like this: + +```tsx +new ReactServerPlugin({ + assetPrefix: process.env.CDN_URL || 'https://localhost:8080/webpack/assets/'; +}); +``` diff --git a/packages/react-server/package.json b/packages/react-server/package.json index 49e3cb0026..adcce8b70c 100644 --- a/packages/react-server/package.json +++ b/packages/react-server/package.json @@ -44,18 +44,26 @@ "@shopify/with-env": "^1.1.8", "@types/koa": "^2.0.0", "@types/supertest": "^2.0.8", + "@types/webpack-virtual-modules": "^0.1.0", "get-port": "^5.0.0", "react": "^16.8.1", "react-dom": "^16.8.1", - "supertest": "^4.0.2" + "supertest": "^4.0.2", + "webpack": ">4.25.1, <=4.5.0" }, "peerDependencies": { "isomorphic-fetch": ">=2.0.0", "react": ">=16.8.0 <17.0.0", "react-dom": ">=16.8.0 <17.0.0" }, + "optionalDependencies": { + "@babel/types": ">=7.0.0", + "webpack-virtual-modules": "^0.2.2" + }, "files": [ "dist/*", - "!tsconfig.tsbuildinfo" + "!tsconfig.tsbuildinfo", + "webpack-plugin.d.ts", + "webpack-plugin.js" ] } diff --git a/packages/react-server/src/webpack-plugin/index.ts b/packages/react-server/src/webpack-plugin/index.ts new file mode 100644 index 0000000000..947ce6190c --- /dev/null +++ b/packages/react-server/src/webpack-plugin/index.ts @@ -0,0 +1 @@ +export {ReactServerPlugin} from './webpack-plugin'; diff --git a/packages/react-server-webpack-plugin/src/test/utilities/workspace.ts b/packages/react-server/src/webpack-plugin/test/utilities/workspace.ts similarity index 100% rename from packages/react-server-webpack-plugin/src/test/utilities/workspace.ts rename to packages/react-server/src/webpack-plugin/test/utilities/workspace.ts diff --git a/packages/react-server-webpack-plugin/src/test/react-server-webpack-plugin.test.ts b/packages/react-server/src/webpack-plugin/test/webpack-plugin.test.ts similarity index 97% rename from packages/react-server-webpack-plugin/src/test/react-server-webpack-plugin.test.ts rename to packages/react-server/src/webpack-plugin/test/webpack-plugin.test.ts index 99db1646ab..5af204c0eb 100644 --- a/packages/react-server-webpack-plugin/src/test/react-server-webpack-plugin.test.ts +++ b/packages/react-server/src/webpack-plugin/test/webpack-plugin.test.ts @@ -2,15 +2,15 @@ import path from 'path'; import webpack, {Compiler} from 'webpack'; -import {HEADER, Options} from '../react-server-webpack-plugin'; +import {HEADER, Options} from '../webpack-plugin'; import {withWorkspace} from './utilities/workspace'; const BUILD_TIMEOUT = 10000; -describe('react-server-webpack-plugin', () => { +describe('webpack-plugin', () => { describe('node', () => { - it( + it.only( 'generates the server and client entrypoints when the virtual server & client modules are present', async () => { const name = 'node-no-entrypoints'; @@ -25,6 +25,8 @@ describe('react-server-webpack-plugin', () => { getModule(serverResults, 'server').source, ]; + console.log('client', client); + expect(client).toBeDefined(); expect(client).toMatch(HEADER); @@ -230,7 +232,7 @@ describe('react-server-webpack-plugin', () => { function runBuild(configPath: string): Promise { return new Promise((resolve, reject) => { const pathFromRoot = path.resolve( - './packages/react-server-webpack-plugin/src/test/fixtures', + './packages/react-server/src/webpack-plugin/test/fixtures', configPath, ); @@ -296,7 +298,7 @@ const createWebpackConfig = ( }, ) => ` const path = require('path'); -const {ReactServerPlugin} = require('../../../react-server-webpack-plugin'); +const {ReactServerPlugin} = require('../../../webpack-plugin'); const universal = { mode: 'production', diff --git a/packages/react-server-webpack-plugin/src/transforms.ts b/packages/react-server/src/webpack-plugin/transforms.ts similarity index 100% rename from packages/react-server-webpack-plugin/src/transforms.ts rename to packages/react-server/src/webpack-plugin/transforms.ts diff --git a/packages/react-server-webpack-plugin/src/react-server-webpack-plugin.ts b/packages/react-server/src/webpack-plugin/webpack-plugin.ts similarity index 98% rename from packages/react-server-webpack-plugin/src/react-server-webpack-plugin.ts rename to packages/react-server/src/webpack-plugin/webpack-plugin.ts index cc9fcb1fec..b0ec0c50b8 100644 --- a/packages/react-server-webpack-plugin/src/react-server-webpack-plugin.ts +++ b/packages/react-server/src/webpack-plugin/webpack-plugin.ts @@ -17,7 +17,7 @@ enum Entrypoint { } export const HEADER = ` - // Generated by @shopify/react-server-webpack-plugin + // Generated by @shopify/react-server/webpack-plugin `; /** diff --git a/packages/react-server/webpack-plugin.d.ts b/packages/react-server/webpack-plugin.d.ts new file mode 100644 index 0000000000..7473d6cd51 --- /dev/null +++ b/packages/react-server/webpack-plugin.d.ts @@ -0,0 +1 @@ +export * from './dist/src/webpack-plugin'; diff --git a/packages/react-server/webpack-plugin.js b/packages/react-server/webpack-plugin.js new file mode 100644 index 0000000000..1c5b37b2b2 --- /dev/null +++ b/packages/react-server/webpack-plugin.js @@ -0,0 +1 @@ +module.exports = require('./dist/src/webpack-plugin'); diff --git a/packages/tsconfig.json b/packages/tsconfig.json index b27f7572bc..161d3232fe 100644 --- a/packages/tsconfig.json +++ b/packages/tsconfig.json @@ -59,7 +59,6 @@ {"path": "./react-performance"}, {"path": "./react-router"}, {"path": "./react-server"}, - {"path": "./react-server-webpack-plugin"}, {"path": "./react-shortcuts"}, {"path": "./react-testing"}, {"path": "./react-tracking-pixel"}, diff --git a/yarn.lock b/yarn.lock index 92619b9606..b088e47d5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1699,7 +1699,7 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c" integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA== -"@types/react-dom@^16.0.11", "@types/react-dom@^16.9.5": +"@types/react-dom@16.9.5", "@types/react-dom@^16.0.11", "@types/react-dom@^16.9.5": version "16.9.5" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.5.tgz#5de610b04a35d07ffd8f44edad93a71032d9aaa7" integrity sha512-BX6RQ8s9D+2/gDhxrj8OW+YD4R+8hj7FEM/OJHGNR0KipE1h1mSsf39YeyC81qafkq+N3rU3h3RFbLSwE5VqUg==