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

Limit to only using require to let Rollup bundler to detect the file as cjs file #857

Merged
merged 7 commits into from Mar 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions .github/workflows/integrated_test.yml
Expand Up @@ -22,9 +22,12 @@ jobs:
- examples/v7-managed-react
- examples/v7-react18
- examples/v8-react18
- examples/v8-vite5
include:
- example_dir: examples/v8-react18
node-version: 18.x
- example_dir: examples/v8-vite5
node-version: 18.x

steps:
- uses: actions/checkout@v3
Expand Down
16 changes: 16 additions & 0 deletions examples/v8-vite5/.eslintrc.cjs
@@ -0,0 +1,16 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
26 changes: 26 additions & 0 deletions examples/v8-vite5/.gitignore
@@ -0,0 +1,26 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

*storybook.log
27 changes: 27 additions & 0 deletions examples/v8-vite5/.storybook/main.js
@@ -0,0 +1,27 @@
import { join, dirname } from 'path';

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value) {
return dirname(require.resolve(join(value, 'package.json')));
}

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('storycap'),
],
framework: {
name: getAbsolutePath('@storybook/react-vite'),
options: {},
},
docs: {
autodocs: 'tag',
},
};
export default config;
22 changes: 22 additions & 0 deletions examples/v8-vite5/.storybook/preview.js
@@ -0,0 +1,22 @@
import { withScreenshot } from 'storycap'

export const decorators = [
withScreenshot,
];

export const parameters = {
screenshot: {
viewports: {
LARGE: {
width: 1200,
height: 800,
},
SMALL: {
width: 375,
height: 667,
deviceScaleFactor: 2,
isMobile: true,
},
},
},
};
8 changes: 8 additions & 0 deletions examples/v8-vite5/README.md
@@ -0,0 +1,8 @@
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
13 changes: 13 additions & 0 deletions examples/v8-vite5/index.html
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
55 changes: 55 additions & 0 deletions examples/v8-vite5/package.json
@@ -0,0 +1,55 @@
{
"name": "v8-vite5",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"clear": "rimraf __screenshots__",
"dev": "vite",
"build": "vite build",
"test": "vitest run",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"prestorybook": "../../scripts/e2e-prestorybook.js .",
"prebuild-storybook": "../../scripts/e2e-prestorybook.js .",
"storycap:all": "yarn build-storybook && yarn test && storycap --verbose --server-timeout 100000 --server-cmd \"http-server -p 9009 storybook-static\" \"http://127.0.0.1:9009\""
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"resolutions": {
"jackspeak": "2.1.1"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.2.23",
"@storybook/addon-essentials": "^8.0.2",
"@storybook/addon-interactions": "^8.0.2",
"@storybook/addon-links": "^8.0.2",
"@storybook/addon-onboarding": "^8.0.2",
"@storybook/blocks": "^8.0.2",
"@storybook/manager-api": "^8.0.0",
"@storybook/preview-api": "^8.0.0",
"@storybook/react": "^8.0.2",
"@storybook/react-vite": "^8.0.2",
"@storybook/test": "^8.0.2",
"@testing-library/react": "^14.0.0",
"@types/react": "^18.2.64",
"@types/react-dom": "^18.2.21",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"eslint-plugin-storybook": "^0.8.0",
"http-server": "^14.1.1",
"jsdom": "^24.0.0",
"prop-types": "^15.8.1",
"rimraf": "^2.6.3",
"storybook": "^8.0.2",
"vite": "^5.1.6",
"vitest": "^1.4.0"
}
}
1 change: 1 addition & 0 deletions examples/v8-vite5/public/vite.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions examples/v8-vite5/setupFile.js
@@ -0,0 +1,5 @@
import '@testing-library/jest-dom'
import { setProjectAnnotations } from '@storybook/react';
import * as globalStorybookConfig from './.storybook/preview.js';

setProjectAnnotations(globalStorybookConfig);
33 changes: 33 additions & 0 deletions examples/v8-vite5/src/App.css
@@ -0,0 +1,33 @@
.App {
text-align: center;
}

.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
28 changes: 28 additions & 0 deletions examples/v8-vite5/src/App.jsx
@@ -0,0 +1,28 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}

export default App;
10 changes: 10 additions & 0 deletions examples/v8-vite5/src/App.test.jsx
@@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

it('renders without crashing', () => {
const div = document.createElement('div');
const root = ReactDOM.createRoot(div);
root.render(<App />);
root.unmount();
});
7 changes: 7 additions & 0 deletions examples/v8-vite5/src/Button.jsx
@@ -0,0 +1,7 @@
import React from 'react';

export const Button = ({ children, onClick }) => (
<button className='button' onClick={onClick} type="button">
{children}
</button>
);
32 changes: 32 additions & 0 deletions examples/v8-vite5/src/Button.stories.jsx
@@ -0,0 +1,32 @@
import React from 'react';
import { Button } from './Button';
import { action } from '@storybook/addon-actions';

import { isScreenshot } from 'storycap';

export default {
title: 'Button',
component: Button,
};

export const WithText = {
render: () => <Button onClick={action('clicked')}>Hello {isScreenshot() ? 'Storycap' : 'Button'}</Button>,
};

export const WithSomeEmoji = {
render: () => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
),
};

export const ToBeSkipped = {
parameters: {
screenshot: {
skip: true,
},
},
};
12 changes: 12 additions & 0 deletions examples/v8-vite5/src/ClickableButton.jsx
@@ -0,0 +1,12 @@
import React, { useState } from 'react';

const ClickableButton = () => {
const [counter, setCounter] = useState(0);
return (
<button className="clickable" onClick={() => setCounter(counter + 1)}>
Clicked: {counter}
</button>
);
};

export default ClickableButton;
14 changes: 14 additions & 0 deletions examples/v8-vite5/src/ClickableButton.stories.jsx
@@ -0,0 +1,14 @@
import ClickableButton from './ClickableButton';

export default {
title: 'ClickableButton',
component: ClickableButton,
};

export const Normal = {
parameters: {
screenshot: {
click: 'button.clickable',
},
},
};
12 changes: 12 additions & 0 deletions examples/v8-vite5/src/ImageButton.jsx
@@ -0,0 +1,12 @@
import React from 'react'

const ImageButton = () => (
<button style={{
width: 48,
height: 48,
backgroundSize: 'contain',
backgroundImage: "url('https://raw.githubusercontent.com/reg-viz/artwork/master/logo/reg-viz-default.svg?sanitize=true')",
}} />
);

export default ImageButton;
8 changes: 8 additions & 0 deletions examples/v8-vite5/src/ImageButton.stories.jsx
@@ -0,0 +1,8 @@
import ImageButton from './ImageButton';

export default {
title: 'ImageButton',
component: ImageButton,
};

export const Normal = {};
9 changes: 9 additions & 0 deletions examples/v8-vite5/src/MyButton.jsx
@@ -0,0 +1,9 @@
import React from 'react'

const MyButton = () => (
<button className="my-button">
My Button
</button>
);

export default MyButton;
23 changes: 23 additions & 0 deletions examples/v8-vite5/src/MyButton.stories.jsx
@@ -0,0 +1,23 @@
import MyButton from './MyButton';

export default {
title: 'MyButton',
component: MyButton,
};

export const Normal = {
parameters: {
screenshot: {
variants: {
hovered: {
extends: ['LARGE', 'SMALL'],
hover: '.my-button',
},
focused: {
extends: ['LARGE', 'SMALL'],
focus: '.my-button',
},
},
},
},
};