Merge pull request #72 from oklas/task-10

Add baseUrl support

.gitignore

@@ -2,3 +2,4 @@ node_modules
 example/*/node_modules
 test/dists
 coverage
+.DS_Store

README.md

@@ -180,15 +180,32 @@ and replace `react-scripts` in `package.json`:
   }
 ```
 
+
+#### Using baseUrl
+
+* **`baseUrl = '.'`**
+
+  * able to create alias outside of `src` (near `src`)
+  * for each directory in `src` alias **does not** created automatically (must be declared manually)
+
+* **baseUrl = 'src'**
+
+  * alias outside of `src` is not possible, only in directory specified in `baseUrl`
+  * for each folder in `src` alias created automatically with same name as folder
+
+See also experimental [autoscan](https://github.com/oklas/react-app-alias/issues/70) feature
+
+
 #### API
 
 * **options**
 
 ```ts
   Options {
     alias?: { [alias: string]: string }; // optional alias map
-    tsconfig?: string, // optinal tsconfig.json path
-    jsconfig?: string, // options jsconfig.json path
+    tsconfig?: string, // optional tsconfig.json path
+    jsconfig?: string, // optional jsconfig.json path
+    baseUrl?: string, // optional by default from config
   }
 ```
 

example/above/src/App.test.tsx

@@ -8,6 +8,12 @@ test('renders text', () => {
   expect(linkElement).toBeInTheDocument();
 });
 
+test('renders internal component from src', () => {
+  render(<App />);
+  const nearElement = screen.getByText(/Internal/i);
+  expect(nearElement).toBeInTheDocument();
+});
+
 test('renders component from near src', () => {
   render(<App />);
   const nearElement = screen.getByText(/Near Src/i);

example/above/src/App.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
-import NearSrc from 'near-src/NearSrc'
 import AboveRootJs from 'above-root-js/AboveRootJs'
 import AboveRootTs from 'above-root-ts/AboveRootTs'
+import NearSrc from 'near-src/NearSrc'
+import Internal from 'InternalEx/index'
 import './App.css'
 
 function App() {
   return (
     <div className="App">
       <h2>Main</h2>
+      <Internal />
       <NearSrc />
       <AboveRootJs/>
       <AboveRootTs />

example/above/src/InternalEx/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Internal() {
+  return (
+    <h3>Internal</h3>
+  )
+}
+
+export default Internal

example/above/tsconfig.paths.json

@@ -4,7 +4,8 @@
     "paths": {
       "above-root-ts/*": [ "../above-root-ts/src/*" ],
       "above-root-js/*": [ "../above-root-js/src/*" ],
-      "near-src/*": [ "near-src/src/*" ]
+      "near-src/*": [ "near-src/src/*" ],
+      "InternalEx/*": [ "src/InternalEx/*" ]
     }
   }
 }

example/above/yarn.lock

@@ -9181,18 +9181,6 @@ [email protected]:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-app-alias-ex@^0.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/react-app-alias-ex/-/react-app-alias-ex-1.0.0.tgz#d41a7c16be47915f6955fde2feeb1caeb3c55372"
-  integrity sha512-PIf7d+tZhJiwsBIzvBDYtWBuO/xhlRW2Jaxny4MfqnkSHPocAhD97a051Q7QMtiBEDt2WmFrBfVZ5Zx3IhjgPw==
-  dependencies:
-    react-app-alias "^0.0.0"
-
-react-app-alias@^0.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/react-app-alias/-/react-app-alias-1.0.0.tgz#8c644e0f537e802e0a7de7d0cba327d1caee45ca"
-  integrity sha512-rOA8TKlN932zFCjnZjWzvTk9GLs7b6dgj2BDpJ3Pvi5oxpVvaGHroAL//YxEXxJiLE3lFLchTfAD9FbN7/SChQ==
-
 react-app-polyfill@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"

example/below/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

example/below/README.md

@@ -0,0 +1,12 @@
+# Demo
+
+This example demonstrate base `alias` implementation (without `above root` imports)
+
+*Configuration (with `above root`) imports is in `example/above` directory*
+
+Here is example for crete-react-app versions 4.1 and above
+
+The version 4.0 of create-react-app requires patch due to
+[create-react-app #9921](https://github.com/facebook/create-react-app/pull/9921)
+The example with patch available [here](https://github.com/oklas/react-app-rewire-alias/tree/055bd2fd79dd391b2b79be15dcaa2a78b7779e8e/example/main) use yarn (yarn.lock)
+

example/below/config-overrides.js

@@ -0,0 +1,7 @@
+const {aliasWebpack, aliasJest} = require('react-app-alias')
+
+const options = {
+}
+
+module.exports = aliasWebpack(options)
+module.exports.jest = aliasJest(options)

example/below/craco.config.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+const { CracoAliasPlugin } = require('react-app-alias');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoAliasPlugin,
+      options: {
+      },
+    },
+  ],
+};

example/below/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "below",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@craco/craco": "^6.4.3",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.11.7",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "react": "^17.0.2",
+    "react-app-alias": "^0.0.0",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "typescript": "4.4.4",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

example/below/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

example/below/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

example/below/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

example/below/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.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);
+  }
+}

example/below/src/App.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders text', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/Main/i);
+  expect(linkElement).toBeInTheDocument();
+});
+
+test('renders internal component from src', () => {
+  render(<App />);
+  const nearElement = screen.getByText(/Internal/i);
+  expect(nearElement).toBeInTheDocument();
+});

example/below/src/App.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Internal from 'Internal/index'
+import './App.css'
+
+function App() {
+  return (
+    <div className="App">
+      <h2>Main</h2>
+      <Internal />
+    </div>
+  );
+}
+
+export default App;

example/below/src/Internal/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Internal() {
+  return (
+    <h3>Internal</h3>
+  )
+}
+
+export default Internal

example/below/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}