Try to add the support for yarn2 pnp #26

saltyshiomix · Jun 19, 2020 · a7670c6 · a7670c6
1 parent 7a5fafd
commit a7670c6
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 0 deletions.
diff --git a/examples/support-yarn2-pnp/.gitignore b/examples/support-yarn2-pnp/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+.pnp/*
+!.pnp/releases
+!.pnp/plugins
+!.pnp/sdks
+!.pnp/versions
+.pnp.*
+.ssr
diff --git a/examples/support-yarn2-pnp/package.json b/examples/support-yarn2-pnp/package.json
@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "support-yarn2-pnp",
+  "scripts": {
+    "dev": "node server.js"
+  },
+  "dependencies": {
+    "@react-ssr/core": "latest",
+    "@react-ssr/express": "latest",
+    "express": "^4.17.1",
+    "pnp-webpack-plugin": "^1.6.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "installConfig": {
+    "pnp": true
+  }
+}
diff --git a/examples/support-yarn2-pnp/server.js b/examples/support-yarn2-pnp/server.js
@@ -0,0 +1,17 @@
+const express = require('express');
+const register = require('@react-ssr/express/register');
+
+const app = express();
+
+(async () => {
+  await register(app);
+
+  app.get('/', (req, res) => {
+    const user = { name: 'World' };
+    res.render('index', { user });
+  });
+
+  app.listen(3000, () => {
+    console.log('> Ready on http://localhost:3000');
+  });
+})();
diff --git a/examples/support-yarn2-pnp/ssr.config.js b/examples/support-yarn2-pnp/ssr.config.js
@@ -0,0 +1,17 @@
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+
+module.exports = {
+  webpack: (config) => {
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      PnpWebpackPlugin,
+    ];
+
+    config.resolveLoader.plugins = [
+      ...(config.resolveLoader.plugins || []),
+      PnpWebpackPlugin.moduleLoader(module),
+    ];
+
+    return config;
+  },
+};
diff --git a/examples/support-yarn2-pnp/views/index.jsx b/examples/support-yarn2-pnp/views/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Head } from '@react-ssr/express';
+
+const Index = ({ user }) => {
+  const [message, setMessage] = React.useState('waiting...');
+
+  const onClick = () => setMessage('This is a react-ssr!');
+
+  return (
+    <React.Fragment>
+      <Head>
+        <title>
+          basic-jsx - @react-ssr/express
+        </title>
+      </Head>
+      <p>Hello {user.name}!</p>
+      <button onClick={onClick}>Click Me</button>
+      <p>Message from state: {message}</p>
+    </React.Fragment>
+  );
+};
+
+export default Index;