fix: fix release build

Author: martini97

.eslintrc.json

@@ -43,7 +43,12 @@
     },
     "import/resolver": {
       "alias": {
-        "map": [["~", "./"]],
+        "map": [
+          ["context", "./src/context"],
+          ["hooks", "./src/hooks"],
+          ["hocs", "./src/hocs"],
+          ["utils", "./src/utils"]
+        ],
         "extensions": [".ts", ".js", ".tsx"]
       }
     }

jest.config.js

@@ -6,6 +6,9 @@ module.exports = {
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.{ts,tsx}'],
   moduleNameMapper: {
-    '^~(.*)$': '<rootDir>$1',
+    '^context(.*)$': '<rootDir>/src/context$1',
+    '^hooks(.*)$': '<rootDir>/src/hooks$1',
+    '^hocs(.*)$': '<rootDir>/src/hocs$1',
+    '^utils(.*)$': '<rootDir>/src/utils$1',
   },
 };

package.json

@@ -3,9 +3,8 @@
   "version": "2.0.1",
   "description": "Dynamic frontend settings for React applications",
   "source": "src/index.ts",
-  "main": "dist/main.js",
+  "main": "dist",
   "types": "dist/index.d.ts",
-  "module": "dist/module.js",
   "author": "Loadsmart <[email protected]>",
   "license": "MIT",
   "files": [
@@ -18,8 +17,10 @@
   "devDependencies": {
     "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
-    "@parcel/packager-ts": "^2.0.0",
-    "@parcel/transformer-typescript-types": "^2.0.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@semantic-release/commit-analyzer": "^9.0.1",
     "@semantic-release/git": "^10.0.0",
     "@semantic-release/github": "^8.0.1",
@@ -33,6 +34,8 @@
     "@types/react": "^17.0.30",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
+    "@zerollup/ts-transform-paths": "^1.7.18",
+    "core-js": "^3.18.3",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "^8.0.1",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -41,21 +44,22 @@
     "eslint-plugin-react": "^7.26.1",
     "husky": "^7.0.0",
     "jest": "^27.2.5",
-    "parcel": "^2.0.0",
     "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^16.9.0",
+    "rollup": "^2.58.0",
+    "rollup-plugin-delete": "^2.0.0",
     "semantic-release": "^18.0.0",
     "ts-jest": "^27.0.6",
+    "ttypescript": "^1.5.12",
     "typescript": "^4.4.4"
   },
   "peerDependencies": {
     "react": "16"
   },
   "scripts": {
-    "watch": "parcel watch",
-    "build": "parcel build",
+    "build": "rollup --config",
     "lint": "eslint --ext 'js,jsx,ts,tsx' .",
     "lint:fix": "eslint --ext 'js,jsx,ts,tsx' . --fix",
     "commit": "cz",

rollup.config.js

@@ -0,0 +1,37 @@
+// import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import del from 'rollup-plugin-delete';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import ttypescript from 'ttypescript';
+
+import packageJson from './package.json';
+
+const { main, source } = packageJson;
+const peerDependencies = Object.keys(packageJson.peerDependencies);
+
+const config = {
+  input: source,
+  output: {
+    dir: main,
+    format: 'cjs',
+    sourcemap: true,
+  },
+  plugins: [
+    del({ targets: `${main}/*` }),
+    typescript({
+      typescript: ttypescript,
+      exclude: ['./tests*'],
+    }),
+    resolve({
+      // Source: https://rollupjs.org/guide/en/#peer-dependencies
+      customResolveOptions: {
+        moduleDirectories: 'node_modules',
+      },
+    }),
+    commonjs(),
+  ],
+  external: [...peerDependencies],
+};
+
+export default config;

src/context/provider.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 
-import type { SettingsProviderValue } from '~/src/context/context';
-import { SettingsContext } from '~/src/context/context';
+import type { SettingsProviderValue } from 'context/context';
+import { SettingsContext } from 'context/context';
 
 export type SettingsValue = Pick<SettingsProviderValue, 'settings' | 'flags'>;
 

src/hocs/withFeatureFlag.tsx

@@ -1,7 +1,7 @@
 import type { ComponentType } from 'react';
 import React from 'react';
 
-import { useSettings } from '~/src/hooks/useSettings';
+import { useSettings } from 'hooks/useSettings';
 
 interface Options<T> {
   flags: string[];

src/hocs/withSettings.tsx

@@ -1,7 +1,7 @@
 import type { ComponentType } from 'react';
 import React from 'react';
 
-import { useSettings } from '~/src/hooks/useSettings';
+import { useSettings } from 'hooks/useSettings';
 
 interface Options {
   settingsMap: Record<string, string>;

src/hooks/useSettings.ts

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 
-import { SettingsContext } from '~/src/context/context';
-import { parseSettings } from '~/src/utils/settings';
+import { SettingsContext } from 'context/context';
+import { parseSettings } from 'utils/settings';
 
 export function useSettings(keys: string[]): {
   values: Array<boolean | null | unknown>;

src/index.ts

@@ -1,4 +1,4 @@
-export { SettingsProvider } from '~/src/context/provider';
-export { useSettings } from '~/src/hooks/useSettings';
-export { withFeatureFlag } from '~/src/hocs/withFeatureFlag';
-export { withSettings } from '~/src/hocs/withSettings';
+export { SettingsProvider } from 'context/provider';
+export { useSettings } from 'hooks/useSettings';
+export { withFeatureFlag } from 'hocs/withFeatureFlag';
+export { withSettings } from 'hocs/withSettings';

src/utils/settings.ts

@@ -1,4 +1,4 @@
-import type { SettingsValue } from '~/src/context/provider';
+import type { SettingsValue } from 'context/provider';
 
 export function parseSettings(keys: string[], settings: SettingsValue): Array<boolean | null | unknown> {
   return keys.map((key) =>

tests/context/provider.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { act, render, waitFor } from '@testing-library/react';
 
-import { SettingsProvider } from '~/src/context/provider';
-import type { SettingsProviderValue } from '~/src/context/context';
-import { SettingsContext } from '~/src/context/context';
+import { SettingsProvider } from 'context/provider';
+import type { SettingsProviderValue } from 'context/context';
+import { SettingsContext } from 'context/context';
 
 describe('SettingsProvider', () => {
   const settings = {

tests/hocs/withFeatureFlag.spec.tsx

@@ -2,9 +2,9 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { withFeatureFlag } from '~/src/hocs/withFeatureFlag';
-import type { SettingsProviderValue } from '~/src/context/context';
-import { SettingsContext } from '~/src/context/context';
+import { withFeatureFlag } from 'hocs/withFeatureFlag';
+import type { SettingsProviderValue } from 'context/context';
+import { SettingsContext } from 'context/context';
 
 describe('withFeatureFlag', () => {
   const Component = () => <div data-testid="component" />;

tests/hocs/withSettings.spec.tsx

@@ -2,9 +2,9 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { withSettings } from '~/src/hocs/withSettings';
-import type { SettingsProviderValue } from '~/src/context/context';
-import { SettingsContext } from '~/src/context/context';
+import { withSettings } from 'hocs/withSettings';
+import type { SettingsProviderValue } from 'context/context';
+import { SettingsContext } from 'context/context';
 
 describe('withSettings', () => {
   const Component = ({ dataTestId, children }: { dataTestId?: string; children: ReactNode }) => (

tests/hooks/useSettings.spec.tsx

@@ -2,9 +2,9 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 
-import { useSettings } from '~/src/hooks/useSettings';
-import type { SettingsProviderValue } from '~/src/context/context';
-import { SettingsContext } from '~/src/context/context';
+import type { SettingsProviderValue } from 'context/context';
+import { SettingsContext } from 'context/context';
+import { useSettings } from 'hooks/useSettings';
 
 function wrapper(value: Partial<SettingsProviderValue>) {
   return function Wrapper({ children }: { children: ReactNode }) {

tests/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["../src/**/*", "./**/*"]
+}

tests/utils/settings.spec.ts

@@ -1,5 +1,5 @@
-import type { SettingsValue } from '~/src/context/provider';
-import { parseSettings } from '~/src/utils/settings';
+import type { SettingsValue } from 'context/provider';
+import { parseSettings } from 'utils/settings';
 
 describe('parseSettings', () => {
   const settings: SettingsValue = {

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src/**/*", "tests/**/*"],
+  "include": ["src/**/*"],
   "compilerOptions": {
     "target": "es2021",
     "strict": true,
@@ -14,8 +14,12 @@
     "moduleResolution": "node",
     "downlevelIteration": true,
     "baseUrl": ".",
+    "plugins": [{ "transform": "@zerollup/ts-transform-paths" }],
     "paths": {
-      "~*": ["./*"]
+      "context/*": ["src/context/*"],
+      "hooks/*": ["src/hooks/*"],
+      "hocs/*": ["src/hocs/*"],
+      "utils/*": ["src/utils/*"]
     }
   },
   "exclude": ["node_modules"]