Fix/typescript errors

.gitignore

@@ -62,3 +62,7 @@ src/*
 
 # generated by bob
 lib/
+
+# bundle-bench tool
+bundle-bench/
+phosphor-react-native-*.tgz

.npmignore

@@ -1,3 +1,10 @@
 /src
 lib/**/*.map
 /example
+/bundle-bench
+/.vscode
+/__tests__
+/__mocks__
+/.circleci
+/.github
+/.cursor

__mocks__/react-native-svg.js

@@ -0,0 +1,6 @@
+const React = require('react');
+module.exports = {
+  __esModule: true,
+  default: (props) => React.createElement('Svg', props),
+  Path: (props) => React.createElement('Path', props),
+};

__mocks__/react-native.js

@@ -0,0 +1,10 @@
+const React = require('react');
+const createContext = React.createContext;
+const useContext = React.useContext;
+module.exports = {
+  createContext,
+  useContext,
+  StyleSheet: { create: (s) => s },
+  View: (props) => React.createElement('View', props),
+  Text: (props) => React.createElement('Text', props),
+};

__tests__/icon-base-memo.test.ts

@@ -0,0 +1,16 @@
+describe('icon-base memo', () => {
+  it('IconBase export is wrapped in React.memo', () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('../src/lib/icon-base');
+    const IconBase = mod.default;
+    // React.memo returns an object with $$typeof === Symbol.for('react.memo')
+    expect(IconBase.$$typeof).toBe(Symbol.for('react.memo'));
+  });
+
+  it('React.memo wrapped component renders without throwing', () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { default: IconBase } = require('../src/lib/icon-base');
+    // The inner type should be a function (the actual component)
+    expect(typeof IconBase.type).toBe('function');
+  });
+});

__tests__/lib-module-package.test.ts

@@ -0,0 +1,11 @@
+import * as path from 'path';
+import * as fs from 'fs';
+
+describe('lib/module/package.json', () => {
+  it('declares type: module so .js files in module output are treated as ESM', () => {
+    const pkgPath = path.resolve(__dirname, '../lib/module/package.json');
+    expect(fs.existsSync(pkgPath)).toBe(true);
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    expect(pkg.type).toBe('module');
+  });
+});

__tests__/lib-weight-subpaths.test.ts

@@ -0,0 +1,12 @@
+import * as path from 'path';
+import * as fs from 'fs';
+
+const WEIGHTS = ['regular', 'bold', 'thin', 'light', 'fill', 'duotone'];
+const root = path.resolve(__dirname, '..');
+
+describe('per-weight subpath outputs', () => {
+  it.each(WEIGHTS)('src/%s is not generated anymore', (weight) => {
+    const filePath = path.join(root, 'src', weight);
+    expect(fs.existsSync(filePath)).toBe(false);
+  });
+});

__tests__/package-metadata.test.ts

@@ -0,0 +1,39 @@
+import pkg from '../package.json';
+
+describe('package.json metadata', () => {
+  it('has sideEffects: false for tree shaking', () => {
+    expect((pkg as Record<string, unknown>).sideEffects).toBe(false);
+  });
+
+  it('has an exports field for modern bundler resolution', () => {
+    const exports = (pkg as Record<string, unknown>).exports as
+      | Record<string, unknown>
+      | undefined;
+    expect(exports).toBeDefined();
+    expect(exports!['.']).toBeDefined();
+  });
+
+  it('exports field has import (ESM) and require (CJS) conditions', () => {
+    const exports = (pkg as Record<string, unknown>).exports as Record<
+      string,
+      Record<string, Record<string, string>>
+    >;
+    const main = exports['.'];
+    expect(main.import).toBeDefined();
+    expect(main.require).toBeDefined();
+    expect(main.import.types).toBeDefined();
+    expect(main.require.types).toBeDefined();
+  });
+
+  it('does not expose weight-specific subpath exports', () => {
+    const exports = (pkg as Record<string, unknown>).exports as Record<
+      string,
+      unknown
+    >;
+    const weights = ['regular', 'bold', 'thin', 'light', 'fill', 'duotone'];
+    for (const weight of weights) {
+      expect(exports[`./${weight}`]).toBeUndefined();
+      expect(exports[`./${weight}/icons/*`]).toBeUndefined();
+    }
+  });
+});

babel.config.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-undef
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
 };

eslint.config.mjs

@@ -4,25 +4,31 @@ import tseslint from 'typescript-eslint';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 
 export default [
-  { files: ['**/*.{js,mjs,cjs,ts}'] },
-  { languageOptions: { globals: globals.browser } },
+  { files: ['**/*.{js,mjs,cjs,ts,tsx}'] },
+  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   {
     ignores: [
       'node_modules/',
       'lib/',
-      'src/bold/',
-      'src/duotone/',
-      'src/fill/',
+      'bundle-bench/',
       'src/icons/',
-      'src/light/',
-      'src/regular/',
-      'src/thin/',
       'src/index.tsx',
       'example/',
       'core/',
     ],
   },
+  // CommonJS files: allow require() and module.exports
+  {
+    files: ['**/*.cjs', 'jest.config.js', '__mocks__/**/*.js'],
+    languageOptions: {
+      sourceType: 'commonjs',
+      globals: globals.commonjs,
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
   eslintPluginPrettierRecommended,
 ];

example/.gitignore

@@ -7,8 +7,10 @@ node_modules/
 .expo/
 dist/
 web-build/
+expo-env.d.ts
 
 # Native
+.kotlin/
 *.orig.*
 *.jks
 *.p8
@@ -34,8 +36,6 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 
-# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
-# The following patterns were generated by expo-cli
-
-expo-env.d.ts
-# @end expo-cli
+# generated native folders
+/ios
+/android

example/app.json

@@ -1,14 +1,14 @@
 {
   "expo": {
-    "name": "phosphor-react-native-example",
-    "slug": "phosphor-react-native-example",
+    "name": "example",
+    "slug": "example",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "phosphor-react-native-example",
-    "userInterfaceStyle": "light",
+    "scheme": "example",
+    "userInterfaceStyle": "automatic",
     "splash": {
-      "image": "./assets/images/splash.png",
+      "image": "./assets/images/splash-icon.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -17,9 +17,12 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      }
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "backgroundImage": "./assets/images/android-icon-background.png",
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+      },
+      "predictiveBackGestureEnabled": false
     },
     "web": {
       "bundler": "metro",
@@ -33,4 +36,4 @@
       "typedRoutes": true
     }
   }
-}
+}

example/app/(tabs)/_layout.tsx

@@ -1,44 +1,68 @@
-import { Tabs } from 'expo-router';
 import React from 'react';
+import { SymbolView } from 'expo-symbols';
+import { Link, Tabs } from 'expo-router';
+import { Platform, Pressable } from 'react-native';
 
-import { ListIcon, TestTubeIcon } from '@/components/icons';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import Colors from '@/constants/Colors';
+import { useColorScheme } from '@/components/useColorScheme';
+import { useClientOnlyValue } from '@/components/useClientOnlyValue';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-      }}
-    >
+        tabBarActiveTintColor: Colors[colorScheme].tint,
+        // Disable the static render of the header on web
+        // to prevent a hydration error in React Navigation v6.
+        headerShown: useClientOnlyValue(false, false),
+      }}>
       <Tabs.Screen
         name="index"
         options={{
-          title: 'All icons',
-          tabBarIcon: ({ color, focused }) => (
-            <ListIcon weight={focused ? 'fill' : 'light'} color={color} />
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => (
+            <SymbolView
+              name={{
+                ios: 'chevron.left.forwardslash.chevron.right',
+                android: 'code',
+                web: 'code',
+              }}
+              tintColor={color}
+              size={28}
+            />
           ),
-        }}
-      />
-      <Tabs.Screen
-        name="test-lab"
-        options={{
-          title: 'Test Lab',
-          tabBarIcon: ({ color, focused }) => (
-            <TestTubeIcon weight={focused ? 'fill' : 'light'} color={color} />
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <Pressable style={{ marginRight: 15 }}>
+                {({ pressed }) => (
+                  <SymbolView
+                    name={{ ios: 'info.circle', android: 'info', web: 'info' }}
+                    size={25}
+                    tintColor={Colors[colorScheme].text}
+                    style={{ opacity: pressed ? 0.5 : 1 }}
+                  />
+                )}
+              </Pressable>
+            </Link>
           ),
         }}
       />
       <Tabs.Screen
-        name="single-imports"
+        name="two"
         options={{
-          title: 'Single',
-          tabBarIcon: ({ color, focused }) => (
-            <TestTubeIcon weight={focused ? 'fill' : 'light'} color={color} />
+          title: 'Tab Two',
+          tabBarIcon: ({ color }) => (
+            <SymbolView
+              name={{
+                ios: 'chevron.left.forwardslash.chevron.right',
+                android: 'code',
+                web: 'code',
+              }}
+              tintColor={color}
+              size={28}
+            />
           ),
         }}
       />

example/app/(tabs)/home.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/home';

example/app/(tabs)/index.tsx

@@ -1 +1,31 @@
-export { default } from '@/components/home';
+import { StyleSheet } from 'react-native';
+
+import EditScreenInfo from '@/components/EditScreenInfo';
+import { Text, View } from '@/components/Themed';
+
+export default function TabOneScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Tab One</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <EditScreenInfo path="app/(tabs)/index.tsx" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: '80%',
+  },
+});

example/app/(tabs)/single-imports.tsx

@@ -1 +1 @@
-export { default } from '@/components/single-imports';
+export { default } from '@/screens/single-imports';

example/app/(tabs)/test-lab.tsx

@@ -1 +1 @@
-export { default } from '@/components/test-lab';
+export { default } from '@/screens/test-lab';

example/app/(tabs)/two.tsx

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+import EditScreenInfo from '@/components/EditScreenInfo';
+import { Text, View } from '@/components/Themed';
+
+export default function TabTwoScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Tab Two</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <EditScreenInfo path="app/(tabs)/two.tsx" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: '80%',
+  },
+});