chore: verdaccio setup

.github/workflows/ci.yml

@@ -32,7 +32,22 @@ jobs:
       - uses: nrwl/nx-set-shas@v4
 
       # Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected
-      - run: pnpm exec nx affected -t typecheck lint
-      - run: pnpm exec nx affected -t test
-      - run: pnpm exec nx affected -t build
-      - run: pnpm exec nx affected -t e2e
+      - name: Typecheck and lint
+        run: pnpm exec nx affected -t typecheck lint
+
+      - name: Run tests
+        run: pnpm exec nx affected -t test
+
+      - name: Build
+        run: pnpm build
+
+      - name: Run end-to-end tests
+        run: |
+          # Run in background
+          pnpm verdaccio:init &
+
+          npx [email protected] http://localhost:4873
+          pnpm verdaccio:publish
+
+          NPM_CONFIG_REGISTRY=http://localhost:4873 pnpm exec nx affected -t e2e
+

.gitignore

@@ -4,6 +4,7 @@
 dist
 tmp
 /out-tsc
+*.orig
 
 # dependencies
 node_modules

.npmrc

@@ -1,2 +1,2 @@
-strict-peer-dependencies=false
+link-workspace-packages=true
 auto-install-peers=true

.verdaccio/config.yml

@@ -1,28 +1,19 @@
-# path to a directory with all packages
-storage: ../tmp/local-registry/storage
+storage: /tmp/verdaccio-storage
 
-# a list of other known repositories we can talk to
 uplinks:
   npmjs:
     url: https://registry.npmjs.org/
-    maxage: 60m
 
 packages:
-  '**':
-    # give all users (including non-authenticated users) full access
-    # because it is a local registry
+  '@callstack/*':
     access: $all
     publish: $all
-    unpublish: $all
-
-    # if package is not available locally, proxy requests to npm registry
+  '**':
+    access: $all
     proxy: npmjs
 
-# log settings
+# This options does not seem to react to changes when used with `runServer()` node API
+# Maybe upgrade to Verdaccio 6.x will help
+# See: https://github.com/verdaccio/verdaccio/issues/3728
 logs:
-  type: stdout
-  format: pretty
-  level: warn
-
-publish:
-  allow_offline: true # set offline to true to allow publish offline
+  - { type: stdout, format: pretty, level: info }

CONTRIBUTING.md

@@ -67,6 +67,36 @@ pnpm rnef start
 pnpm rnef run:android
 ```
 
+### Testing Create RNEF App project
+
+In order to test changes to `create-app` package, you need to run the following commands:
+
+```sh
+# Ensure fresh build
+nx reset
+pnpm build
+
+# Start local verdaccio registry (in one terminal), keep it open
+pnpm verdaccio:init
+
+# Publish packages to verdaccio (in another terminal)
+pnpm verdaccio:publish
+
+# Remove pnpm dlx cache, so that new version of package is used
+rm -rf ~/Library/Caches/pnpm/dlx/
+
+# Run tests
+pnpm e2e
+
+# Or Create RNEF app
+NPM_CONFIG_REGISTRY=http://localhost:4873 pnpm create @callstack/rnef-app --registry http://localhost:4873
+# Then use pnpm install with registry
+NPM_CONFIG_REGISTRY=http://localhost:4873 pnpm install
+
+# Clean up
+pnpm verdaccio-reset
+```
+
 ## Typechecking, linting and testing
 
 Currently we use TypeScript for typechecking, `eslint` with `prettier` for linting and formatting the code and `jest` for testing.

nx.json

@@ -19,7 +19,6 @@
         "outputPath": "{projectRoot}/dist",
         "main": "{projectRoot}/src/index.ts",
         "tsConfig": "{projectRoot}/tsconfig.lib.json",
-        "assets": ["packages/{projectRoot}/*.md"],
         "buildableProjectDepsInPackageJsonType": "dependencies",
         "generateExportsField": true,
         "compilerOptions": {

package.json

@@ -5,19 +5,24 @@
   "type": "module",
   "scripts": {
     "build": "nx run-many --target build",
+    "postbuild": "nx run-many --target clean-dist",
     "test": "nx run-many --target test",
     "e2e": "nx run-many --target e2e",
     "lint": "nx run-many --target lint",
     "typecheck": "nx run-many --target typecheck",
     "watch": "nx watch --all -- nx run \\$NX_PROJECT_NAME:build",
-    "link-packages": "node ./scripts/linkPackages.mjs"
+    "link-packages": "node ./scripts/linkPackages.mjs",
+    "verdaccio:init": "node ./scripts/verdaccio-init.mjs",
+    "verdaccio:publish": "node ./scripts/verdaccio-publish.mjs",
+    "verdaccio:reset": "./scripts/verdaccio-reset.sh"
   },
   "private": true,
   "dependencies": {
     "tslib": "^2.3.0",
     "vite-tsconfig-paths": "^5.0.1"
   },
   "devDependencies": {
+    "@clack/prompts": "^0.8.2",
     "@eslint/js": "^9.8.0",
     "@nx/eslint": "19.8.0",
     "@nx/eslint-plugin": "19.8.0",
@@ -39,7 +44,7 @@
     "ts-node": "10.9.1",
     "typescript": "~5.5.2",
     "typescript-eslint": "^8.0.0",
-    "verdaccio": "^5.0.4",
+    "verdaccio": "^5.33.0",
     "vite": "^5.0.0",
     "vitest": "^2.1.2"
   },

packages/cli/package.json

@@ -9,9 +9,13 @@
   "bin": {
     "rnef": "./dist/src/bin.js"
   },
+  "scripts": {
+    "clean-dist": "rm -f dist/package.json",
+    "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc"
+  },
   "dependencies": {
-    "@callstack/rnef-config": "workspace:*",
-    "@callstack/rnef-tools": "workspace:*",
+    "@callstack/rnef-config": "^0.0.1",
+    "@callstack/rnef-tools": "^0.0.1",
     "@clack/prompts": "^0.8.1",
     "@react-native-community/cli-config": "^15.1.2",
     "commander": "^12.1.0",

packages/cli/project.json

@@ -11,8 +11,7 @@
       "options": {
         "outputPath": "packages/cli/dist",
         "main": "packages/cli/src/index.ts",
-        "tsConfig": "packages/cli/tsconfig.lib.json",
-        "assets": ["packages/cli/*.md"]
+        "tsConfig": "packages/cli/tsconfig.lib.json"
       }
     }
   }

packages/cli/src/lib/cli.ts

@@ -1,13 +1,15 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
 import { Command } from 'commander';
 import { getConfig } from '@callstack/rnef-config';
 import { createRequire } from 'module';
-import { logger } from '@callstack/rnef-tools';
+import { logger, resolveFilenameUp } from '@callstack/rnef-tools';
 import { logConfig } from '../config.js';
 import { nativeFingerprintCommand } from './commands/fingerprint.js';
 
 const require = createRequire(import.meta.url);
-
-const { version } = require('./../../package.json');
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const { version } = require(resolveFilenameUp(__dirname, 'package.json'));
 
 type CliOptions = {
   cwd?: string;

packages/config/package.json

@@ -6,6 +6,10 @@
     "types": "./dist/src/index.d.ts",
     "import": "./dist/src/index.js"
   },
+  "scripts": {
+    "clean-dist": "rm -f dist/package.json",
+    "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc"
+  },
   "dependencies": {
     "tslib": "^2.3.0"
   }

packages/config/project.json

@@ -11,8 +11,7 @@
       "options": {
         "outputPath": "packages/config/dist",
         "main": "packages/config/src/index.ts",
-        "tsConfig": "packages/config/tsconfig.lib.json",
-        "assets": ["packages/config/*.md"]
+        "tsConfig": "packages/config/tsconfig.lib.json"
       }
     }
   }

packages/create-app/e2e/e2e.test.ts

@@ -7,10 +7,26 @@ import {
   getTempDirectory,
 } from '@callstack/rnef-test-helpers';
 
-const CREATE_APP_PATH = path.resolve(__dirname, '../dist/src/bin.js');
-const TEMPLATES_DIR = path.resolve(__dirname, '../../../templates');
+/**
+ * Perform following commands to test e2e locally (on macOS):
+ * 1. nx reset
+ * pnpm build
+ * pnpm verdaccio:init (keep it running)
+ * rm -rf ~/Library/Caches/pnpm/dlx/
+ * pnpm e2e
+ */
+
+const VERDACCIO_REGISTRY_URL = 'http://localhost:4873';
+const CREATE_APP_COMMAND = `pnpm create @callstack/rnef-app`;
+
+const ROOT_DIR = path.resolve(__dirname, '../../..');
 const TEMP_DIR = getTempDirectory('e2e-deploys');
 
+const execArgs = {
+  cwd: TEMP_DIR,
+  env: { ...process.env, NPM_CONFIG_REGISTRY: VERDACCIO_REGISTRY_URL },
+};
+
 beforeEach(() => {
   mkdirSync(TEMP_DIR, { recursive: true });
 });
@@ -28,14 +44,15 @@ describe('create-app command', { timeout: 30_000 }, () => {
       }
 
       await execAsync(
-        `node ${CREATE_APP_PATH} ${projectName} --template=default --platform=ios --platform=android --plugin=metro`,
-        { cwd: TEMP_DIR }
+        `${CREATE_APP_COMMAND} ${projectName} --template=default --platform=ios --platform=android --plugin=metro`,
+        execArgs
       );
 
       const packageJsonPath = path.join(projectPath, 'package.json');
       expect(existsSync(packageJsonPath)).toBe(true);
 
       const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+      // TODO: fix template application
       expect(packageJson.name).toBe(projectName);
       expect(packageJson.version).toBe('1.0.0');
       expect(packageJson.private).toBe(true);
@@ -47,10 +64,11 @@ describe('create-app command', { timeout: 30_000 }, () => {
       expect(packageJson.homepage).not.toBeDefined();
       expect(packageJson.keywords).not.toBeDefined();
       expect(packageJson.packageManager).not.toBeDefined();
+      expect(packageJson.publishConfig).not.toBeDefined();
     }
   );
 
-  it.skip('should create a new project from npm template', async () => {
+  it('should create a new project from npm template', async () => {
     const projectName = `test-npm-template-${getRandomString(6)}`;
     const projectPath = path.resolve(TEMP_DIR, projectName);
 
@@ -59,14 +77,15 @@ describe('create-app command', { timeout: 30_000 }, () => {
     }
 
     await execAsync(
-      `node ${CREATE_APP_PATH} ${projectName} --template=@callstack/repack --platform=ios --platform=android --plugin=metro`,
-      { cwd: TEMP_DIR }
+      `${CREATE_APP_COMMAND} ${projectName} --template=@callstack/rnef-template-default --platform=ios --platform=android --plugin=metro`,
+      execArgs
     );
 
     const packageJsonPath = path.join(projectPath, 'package.json');
     expect(existsSync(packageJsonPath)).toBe(true);
 
     const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+    // TODO: fix template application
     expect(packageJson.name).toBe(projectName);
     expect(packageJson.version).toBe('1.0.0');
     expect(packageJson.private).toBe(true);
@@ -78,6 +97,7 @@ describe('create-app command', { timeout: 30_000 }, () => {
     expect(packageJson.homepage).not.toBeDefined();
     expect(packageJson.keywords).not.toBeDefined();
     expect(packageJson.packageManager).not.toBeDefined();
+    expect(packageJson.publishConfig).not.toBeDefined();
   });
 
   it(
@@ -91,16 +111,17 @@ describe('create-app command', { timeout: 30_000 }, () => {
         rmSync(projectPath, { recursive: true, force: true });
       }
 
-      const templatePath = `${TEMPLATES_DIR}/rnef-template-default`;
+      const templatePath = `${ROOT_DIR}/templates/rnef-template-default`;
       await execAsync(
-        `node ${CREATE_APP_PATH} ${projectName} --template="${templatePath}" --platform=ios --platform=android --plugin=metro`,
-        { cwd: TEMP_DIR }
+        `${CREATE_APP_COMMAND} ${projectName} --template="${templatePath}" --platform=ios --platform=android --plugin=metro`,
+        execArgs
       );
 
       const packageJsonPath = path.join(projectPath, 'package.json');
       expect(existsSync(packageJsonPath)).toBe(true);
 
       const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+      // TODO: fix template application
       expect(packageJson.name).toBe(projectName);
       expect(packageJson.version).toBe('1.0.0');
       expect(packageJson.private).toBe(true);
@@ -112,6 +133,7 @@ describe('create-app command', { timeout: 30_000 }, () => {
       expect(packageJson.homepage).not.toBeDefined();
       expect(packageJson.keywords).not.toBeDefined();
       expect(packageJson.packageManager).not.toBeDefined();
+      expect(packageJson.publishConfig).not.toBeDefined();
     }
   );
 });

packages/create-app/package.json

@@ -6,14 +6,19 @@
     "types": "./dist/src/index.d.ts",
     "import": "./dist/src/index.js"
   },
+  "files": [
+    "dist"
+  ],
   "scripts": {
+    "clean-dist": "rm -f dist/package.json",
+    "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc",
     "e2e": "vitest --config vite.e2e.config.js"
   },
   "bin": {
     "create-rnef-app": "./dist/src/bin.js"
   },
   "dependencies": {
-    "@callstack/rnef-tools": "workspace:*",
+    "@callstack/rnef-tools": "^0.0.1",
     "@clack/prompts": "^0.8.1",
     "gradient-string": "^3.0.0",
     "minimist": "^1.2.8",
@@ -22,7 +27,7 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@callstack/rnef-test-helpers": "workspace:*",
+    "@callstack/rnef-test-helpers": "^0.0.1",
     "@types/gradient-string": "^1.1.6",
     "@types/minimist": "^1.2.5"
   }

packages/create-app/src/lib/__tests__/templates.test.ts

@@ -3,17 +3,12 @@ import path from 'node:path';
 import { resolveTemplate, TEMPLATES } from '../templates.js';
 
 test('resolveTemplateName with built-in templates', () => {
-  const expectedPath = path.resolve(
-    __dirname,
-    '../../../../../',
-    'templates/rnef-template-default'
-  );
   expect(resolveTemplate(TEMPLATES, 'default')).toEqual({
-    type: 'local',
+    type: 'npm',
     name: 'default',
-    localPath: expectedPath,
-    directory: '.',
     packageName: '@callstack/rnef-template-default',
+    version: 'latest',
+    directory: '.',
   });
 });