Skip to content

Commit

Permalink
fix: partial module path match fix (#23)
Browse files Browse the repository at this point in the history
fix for partial matches #22
use typescript for validation in development #17

* fix: dont use pull request target
* feat: update example storybook version
* feat: use typescript and add node_module to path
* fix: add project token for fork PRs
* fix: add build step to action
* refactor: remove babel config since it's no longer needed
  • Loading branch information
dannyhw authored Dec 1, 2021
1 parent ff7372a commit c665c8d
Show file tree
Hide file tree
Showing 7 changed files with 468 additions and 447 deletions.
19 changes: 19 additions & 0 deletions .babelrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-typescript',
'@babel/preset-react',
],
env: {
esm: {
presets: [
[
'@babel/preset-env',
{
modules: false,
},
],
],
},
},
};
6 changes: 4 additions & 2 deletions .github/workflows/chromatic.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ on:
push:
branches:
- master
pull_request_target:
pull_request:

# List of jobs
jobs:
Expand All @@ -20,11 +20,13 @@ jobs:
- uses: actions/checkout@v1
- name: Install dependencies
run: yarn
- name: build project
run: yarn build
# 👇 Adds Chromatic as a step in the workflow
- name: Publish to Chromatic
uses: chromaui/action@v1
# Chromatic GitHub Action options
with:
token: ${{ secrets.GITHUB_TOKEN }}
# 👇 Chromatic projectToken, refer to the manage page to obtain it.
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
projectToken: c9eb9dda8699
14 changes: 8 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "start-storybook -p 6006",
"prestorybook": "yarn buildBabel:cjs",
"start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
"build-storybook": "build-storybook",
"prerelease": "zx scripts/prepublish-checks.mjs",
Expand All @@ -49,10 +50,10 @@
"@babel/runtime": "^7.12.5",
"@expo/html-elements": "^0.0.2",
"@react-native-community/eslint-config": "^2.0.0",
"@storybook/addon-actions": "^6.4.0-rc.1",
"@storybook/addon-essentials": "6.4.0-rc.1",
"@storybook/addon-links": "^6.4.0-rc.1",
"@storybook/react": "6.4.0-rc.1",
"@storybook/addon-actions": "^6.4.3",
"@storybook/addon-essentials": "6.4.3",
"@storybook/addon-links": "^6.4.3",
"@storybook/react": "6.4.3",
"@types/jest": "^26.0.23",
"@types/react-native": "^0.65.0",
"@types/react-native-vector-icons": "^6.4.8",
Expand All @@ -67,7 +68,7 @@
"dedent": "^0.7.0",
"eslint": "^7.14.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-storybook": "^0.4.1",
"eslint-plugin-storybook": "^0.5.1",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"native-base": "^3.1.0",
Expand Down Expand Up @@ -119,5 +120,6 @@
"react-native"
],
"icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
}
},
"dependencies": {}
}
113 changes: 2 additions & 111 deletions preset.js
Original file line number Diff line number Diff line change
@@ -1,114 +1,5 @@
const webpack = require('webpack');
const path = require('path');

const getBabelPlugins = (options) => {
let reactNativeWeb = 'react-native-web';
if (options.babelPlugins && Array.isArray(options.babelPlugins)) {
return [reactNativeWeb, ...options.babelPlugins];
}
return [reactNativeWeb];
};

const getModule = (name) => path.join('node_modules', name);

// copied from https://github.com/expo/expo-cli/blob/master/packages/webpack-config/src/loaders/createBabelLoader.ts
const DEFAULT_INCLUDES = [
getModule('react-native'),
getModule('react-navigation'),
getModule('expo'),
getModule('unimodules'),
getModule('@react'),
getModule('@expo'),
getModule('@use-expo'),
getModule('@unimodules'),
getModule('native-base'),
getModule('styled-components'),
];

const DEFAULT_EXCLUDES = [
'/node_modules',
'/bower_components',
'/.expo/',
// Prevent transpiling webpack generated files.
'(webpack)',
];
const webpackFinal = require('./dist/cjs/webpack');

module.exports = {
babel: async (config, options) => ({
...config,
plugins: [...config.plugins, ...getBabelPlugins(options)],
}),
webpackFinal: async (config, options) => {
// swap out react-native for react-native-web
config.resolve.alias = {
'react-native$': 'react-native-web',
};

// Add __DEV__ global variable which is relied on by many libraries
config.plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(
process.env.NODE_ENV || 'development',
),
__DEV__: process.env.NODE_ENV !== 'production' || true,
}),
);

const babelPlugins = getBabelPlugins(options);
const root = (options && options.projectRoot) || process.cwd();
const modules = [
...DEFAULT_INCLUDES,
...((options && options.modulesToTranspile) || []),
];

// fix for uncompiled react-native dependencies
config.module.rules.push({
test: /\.(js|jsx|ts|tsx)$/,
loader: 'babel-loader',
// include logic copied from https://github.com/expo/expo-cli/blob/master/packages/webpack-config/src/loaders/createBabelLoader.ts
include(filename) {
if (!filename) {
return false;
}

for (const possibleModule of modules) {
if (filename.includes(path.normalize(possibleModule))) {
return true;
}
}

if (filename.includes(root)) {
for (const excluded of DEFAULT_EXCLUDES) {
if (filename.includes(path.normalize(excluded))) {
return false;
}
}
return true;
}
return false;
},
options: {
root,
presets: [
[
'module:metro-react-native-babel-preset',
{
useTransformReactJSXExperimental: true,
},
],
[
'@babel/preset-react',
{
runtime: 'automatic',
},
],
],
plugins: [...babelPlugins, '@babel/plugin-proposal-class-properties'],
},
});

config.resolve.extensions = ['.web.js', ...config.resolve.extensions];

return config;
},
webpackFinal,
};
114 changes: 114 additions & 0 deletions src/webpack.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
import webpack from 'webpack';
import path from 'path';

export type Options = {
modulesToTranspile?: string[];
babelPlugins?: string[];
projectRoot?: string;
};

export const getBabelPlugins = (options: Options) => {
let reactNativeWeb = 'react-native-web';
if (options.babelPlugins && Array.isArray(options.babelPlugins)) {
return [reactNativeWeb, ...options.babelPlugins];
}
return [reactNativeWeb];
};

const getModule = (name: string) => path.join('node_modules', name);

// copied from https://github.com/expo/expo-cli/blob/master/packages/webpack-config/src/loaders/createBabelLoader.ts
const DEFAULT_INCLUDES = [
getModule('react-native'),
getModule('react-navigation'),
getModule('expo'),
getModule('unimodules'),
getModule('@react'),
getModule('@expo'),
getModule('@use-expo'),
getModule('@unimodules'),
getModule('native-base'),
getModule('styled-components'),
];

const DEFAULT_EXCLUDES = [
'/node_modules',
'/bower_components',
'/.expo/',
// Prevent transpiling webpack generated files.
'(webpack)',
];

const webpackFinal = async (config: any, options: Options) => {
// swap out react-native for react-native-web
config.resolve.alias = {
'react-native$': 'react-native-web',
};

// Add __DEV__ global variable which is relied on by many libraries
config.plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(
process.env.NODE_ENV || 'development',
),
__DEV__: process.env.NODE_ENV !== 'production' || true,
}),
);

const babelPlugins = getBabelPlugins(options);
const root = options.projectRoot ?? process.cwd();
const userModules = options.modulesToTranspile?.map(getModule) ?? [];
const modules = [...DEFAULT_INCLUDES, ...userModules];

// fix for uncompiled react-native dependencies
config.module.rules.push({
test: /\.(js|jsx|ts|tsx)$/,
loader: 'babel-loader',
// include logic copied from https://github.com/expo/expo-cli/blob/master/packages/webpack-config/src/loaders/createBabelLoader.ts
include(filename: string) {
if (!filename) {
return false;
}

for (const possibleModule of modules) {
if (filename.includes(path.normalize(possibleModule))) {
return true;
}
}

if (filename.includes(root)) {
for (const excluded of DEFAULT_EXCLUDES) {
if (filename.includes(path.normalize(excluded))) {
return false;
}
}
return true;
}
return false;
},
options: {
root,
presets: [
[
'module:metro-react-native-babel-preset',
{
useTransformReactJSXExperimental: true,
},
],
[
'@babel/preset-react',
{
runtime: 'automatic',
},
],
],
plugins: [...babelPlugins, '@babel/plugin-proposal-class-properties'],
},
});

config.resolve.extensions = ['.web.js', ...config.resolve.extensions];

return config;
};

module.exports = webpackFinal;
10 changes: 5 additions & 5 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
"noImplicitAny": true,
"rootDir": "./src",
"skipLibCheck": true,
"target": "es5"
"target": "es5",
"strict": true,
"outDir": "dist"
},
"include": [
"src/**/*"
],
}
"include": ["src/**/*"]
}
Loading

0 comments on commit c665c8d

Please sign in to comment.