feat: build react and native components as separate packages

.gitignore

@@ -2,5 +2,6 @@
 .DS_Store
 .cache
 dist
-src/lined/*
+build
+src/build/*
 src/index.tsx

README.md

@@ -33,13 +33,13 @@ import { Apple } from '@lifeomic/chromicons';
 1. Install Dependencies
 
 ```bash
-yarn add @lifeomic/chromicons react-native-svg
+yarn add @lifeomic/chromicons-native
 ```
 
 2. Import the Icon Components
 
 ```jsx
-import { Apple } from '@lifeomic/chromicons/src/lined/react-native';
+import { Apple } from '@lifeomic/chromicons-native';
 
 <Apple stroke="red" />;
 ```

package.json

@@ -19,12 +19,17 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "tsdx build",
-    "clean": "rm -rf src/lined && rm -rf dist/",
+    "build": "yarn build:react && yarn build:native",
+    "postbuild": "node prepare-packages.js",
+    "build:react": "tsdx build -i src/build/react/index.tsx --tsconfig tsconfig.json",
+    "postbuild:react": "mkdir -p build/react && mv dist build/react && mv src/build/react build/react/src && cp -R src/raw build/react/src",
+    "build:native": "tsdx build -i src/build/native/index.tsx --tsconfig tsconfig.native.json",
+    "postbuild:native": "mkdir -p build/native && mv dist build/native && mv src/build/native build/native/src && cp -R src/raw build/native/src",
+    "clean": "rm -rf src/build && rm -rf dist/ && rm -rf dist && rm -rf build",
     "generate:build-output": "yarn generate:react-components && yarn generate:react-native-components && yarn generate:index-file",
-    "generate:index-file": "echo \"export * from './lined'\" > src/index.tsx",
-    "generate:react-components": "svgr --template svg-template.js src/raw/lined --out-dir src/lined --typescript",
-    "generate:react-native-components": "svgr --template svg-rn-template.js src/raw/lined --out-dir src/lined/react-native --typescript --native",
+    "generate:index-file": "echo \"export * from './lined'\" > src/build/native/index.tsx && echo \"export * from './lined'\" > src/build/react/index.tsx",
+    "generate:react-components": "svgr --template svg-template.js src/raw/lined --out-dir src/build/react/lined --typescript",
+    "generate:react-native-components": "svgr --template svg-rn-template.js src/raw/lined --out-dir src/build/native/lined --typescript --native",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
@@ -40,20 +45,15 @@
     "husky": "^4.3.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-native-svg": "12.x",
     "semantic-release": "^17.4.4",
     "size-limit": "^4.8.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
     "typescript": "^4.1.2"
   },
   "peerDependencies": {
-    "react": ">=16",
-    "react-native-svg": "12.x"
-  },
-  "peerDependenciesMeta": {
-    "react-native-svg": {
-      "optional": true
-    }
+    "react": ">=16"
   },
   "prettier": {
     "printWidth": 80,

prepare-packages.js

@@ -0,0 +1,52 @@
+const fs = require('fs');
+const path = require('path');
+const { promisify } = require('util');
+
+const copyFileAsync = promisify(fs.copyFile);
+const readFileAsync = promisify(fs.readFile);
+const writeFileAsync = promisify(fs.writeFile);
+
+const rewritePackageJSON = async (dir, transformer) => {
+  const packageJsonPath = path.join(dir, 'package.json');
+  const rootPackage = await readFileAsync(packageJsonPath, 'utf8');
+
+  const packageJson = JSON.parse(rootPackage);
+
+  const transformedJSON = transformer(packageJson);
+
+  await writeFileAsync(
+    packageJsonPath,
+    JSON.stringify(transformedJSON, undefined, 2)
+  );
+};
+
+const transformNativePackageJSON = package => {
+  package.name = '@lifeomic/chromicons-native';
+  package.peerDependencies['react-native-svg'] = '>=12.x';
+
+  return package;
+};
+
+const prepareLib = async name => {
+  const libDir = path.resolve(__dirname, 'build', name);
+
+  const filesToCopy = ['package.json', 'README.md', 'LICENSE'];
+
+  await Promise.all(
+    filesToCopy.map(fileName =>
+      copyFileAsync(
+        path.resolve(__dirname, fileName),
+        path.join(libDir, fileName)
+      )
+    )
+  );
+
+  if (name === 'native') {
+    await rewritePackageJSON(libDir, transformNativePackageJSON);
+  }
+};
+
+Promise.all([prepareLib('react'), prepareLib('native')]).catch(err => {
+  console.error(err);
+  process.exitCode = 1;
+});

release.config.js

@@ -2,7 +2,18 @@ module.exports = {
   branches: ['master'],
   plugins: [
     ['@semantic-release/commit-analyzer', { preset: 'conventionalcommits' }],
-    '@semantic-release/npm',
+    [
+      '@semantic-release/npm',
+      {
+        pkgRoot: 'build/react',
+      },
+    ],
+    [
+      '@semantic-release/npm',
+      {
+        pkgRoot: 'build/native',
+      },
+    ],
     [
       '@semantic-release/github',
       {

svg-rn-template.js

@@ -8,19 +8,14 @@ function template(
   { imports, componentName, props, jsx, exports }
 ) {
   jsx.openingElement.attributes = [
-    ...jsx.openingElement.attributes,
+    ...jsx.openingElement.attributes.filter(
+      ({ name: { name } }) => name !== 'xmlns'
+    ),
     {
       type: 'JSXAttribute',
       name: { type: 'JSXIdentifier', name: 'viewBox' },
       value: { type: 'StringLiteral', value: '0 0 24 24' },
     },
-    // For our generated React components, we think this makes sense
-    // to do by default: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute
-    {
-      type: 'JSXAttribute',
-      name: { type: 'JSXIdentifier', name: 'importantForAccessibility' },
-      value: { type: 'StringLiteral', value: 'no-hide-descendants' },
-    },
   ];
   return template.ast`
     ${imports}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
-  "include": ["src", "types"],
+  "include": ["src/build/react", "types"],
   "compilerOptions": {
     "module": "esnext",
     "lib": ["dom", "esnext"],
@@ -10,7 +10,7 @@
     // output .js.map sourcemap files for consumers
     "sourceMap": true,
     // match output dir to input dir. e.g. dist/index instead of dist/src/index
-    "rootDir": "./src",
+    "rootDir": "./src/build/react",
     // stricter type-checking for stronger correctness. Recommended by TS
     "strict": true,
     // linter checks for common issues
@@ -30,6 +30,6 @@
     // error out if import and file system have a casing mismatch. Recommended by TS
     "forceConsistentCasingInFileNames": true,
     // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
-    "noEmit": true,
+    "noEmit": true
   }
 }

tsconfig.native.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
+  "include": ["src/build/native", "types"],
+  "compilerOptions": {
+    // match output dir to input dir. e.g. dist/index instead of dist/src/index
+    "rootDir": "./src/build/native"
+  }
+}

yarn.lock

@@ -3733,7 +3733,7 @@ css-select-base-adapter@^0.1.1:
   resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
   integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
 
-css-select@^2.0.0:
+css-select@^2.0.0, css-select@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
   integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
@@ -3759,6 +3759,14 @@ css-tree@1.0.0-alpha.39:
     mdn-data "2.0.6"
     source-map "^0.6.1"
 
+css-tree@^1.0.0-alpha.39:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
 css-what@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39"
@@ -7310,6 +7318,11 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -9182,6 +9195,14 @@ react-is@^16.12.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-native-svg@^12.1.1:
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1.tgz#5f292410b8bcc07bbc52b2da7ceb22caf5bcaaee"
+  integrity sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q==
+  dependencies:
+    css-select "^2.1.0"
+    css-tree "^1.0.0-alpha.39"
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"