expo-module-template 10.6.0 → 10.7.2

package/$package.json

@@ -13,7 +13,12 @@
     "prepublishOnly": "expo-module prepublishOnly",
     "expo-module": "expo-module"
   },
-  "keywords": ["react-native", "expo", "<%- project.slug %>", "<%- project.name %>"],
+  "keywords": [
+    "react-native",
+    "expo",
+    "<%- project.slug %>",
+    "<%- project.name %>"
+  ],
   "repository": "<%- repo %>",
   "bugs": {
     "url": "<%- repo %>/issues"
@@ -24,9 +29,11 @@
   "dependencies": {},
   "devDependencies": {
     "expo-module-scripts": "^2.0.0",
-    "expo-modules-core": "^0.9.0"
+    "expo-modules-core": "^0.11.3"
   },
   "peerDependencies": {
-    "expo": "*"
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
   }
 }

package/android/src/main/java/{%= project.package %}/{%- project.name %}Module.kt

@@ -21,11 +21,14 @@ class <%- project.name %>Module : Module() {
     // Defines event names that the module can send to JavaScript.
     Events("onChange")
 
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      "Hello world! 👋"
+    }
+
     // Defines a JavaScript function that always returns a Promise and whose native code
     // is by default dispatched on the different thread than the JavaScript runtime runs on.
     AsyncFunction("setValueAsync") { value: String ->
-      println("Hello 👋")
-
       // Send an event to JavaScript.
       sendEvent("onChange", mapOf(
         "value" to value

package/example/App.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import * as <%- project.name %> from '<%- project.slug %>';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>{<%- project.name %>.hello()}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/example/babel.config.js

@@ -0,0 +1,19 @@
+const path = require('path');
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          extensions: ['.tsx', '.ts', '.js', '.json'],
+          alias: {
+            // For development, we want to alias the library to the source
+            '<%- project.slug %>': path.join(__dirname, '..', 'src', '<%- project.name %>.ts'),
+          },
+        },
+      ],
+    ],
+  };
+};

package/example/metro.config.js

@@ -0,0 +1,14 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+const config = getDefaultConfig(__dirname);
+
+config.resolver.nodeModulesPaths = [
+  path.resolve(__dirname, './node_modules'),
+  path.resolve(__dirname, '../node_modules'),
+];
+
+config.watchFolders = [path.resolve(__dirname, '..')];
+
+module.exports = config;

package/example/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "<%- project.slug %>": ["../src/<%- project.name %>"],
+      "<%- project.slug %>/*": ["../src/*"]
+    }
+  }
+}

package/example/webpack.config.js

@@ -0,0 +1,20 @@
+const createConfigAsync = require('@expo/webpack-config');
+const path = require('path');
+
+module.exports = async (env, argv) => {
+  const config = await createConfigAsync(
+    {
+      ...env,
+      babel: {
+        dangerouslyAddModulePathsToTranspile: ['<%- project.slug %>'],
+      },
+    },
+    argv
+  );
+  config.resolve.modules = [
+    path.resolve(__dirname, './node_modules'),
+    path.resolve(__dirname, '../node_modules'),
+  ];
+
+  return config;
+};

package/expo-module.config.json

@@ -1,9 +1,9 @@
 {
   "platforms": ["ios", "android", "web"],
   "ios": {
-    "modulesClassNames": ["<%- project.name %>Module"]
+    "modules": ["<%- project.name %>Module"]
   },
   "android": {
-    "modulesClassNames": ["<%- project.package %>.<%- project.name %>Module"]
+    "modules": ["<%- project.package %>.<%- project.name %>Module"]
   }
 }

package/ios/{%- project.name %}Module.swift

@@ -18,13 +18,16 @@ public class <%- project.name %>Module: Module {
     // Defines event names that the module can send to JavaScript.
     Events("onChange")
 
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      return "Hello world! 👋"
+    }
+
     // Defines a JavaScript function that always returns a Promise and whose native code
     // is by default dispatched on the different thread than the JavaScript runtime runs on.
     AsyncFunction("setValueAsync") { (value: String) in
-      print("Hello 👋")
-
       // Send an event to JavaScript.
-      sendEvent("onChange", [
+      self.sendEvent("onChange", [
         "value": value
       ])
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-module-template",
-  "version": "10.6.0",
+  "version": "10.7.2",
   "description": "ExpoModuleTemplate standalone module",
   "main": "build/ModuleTemplate.js",
   "types": "build/ModuleTemplate.d.ts",
@@ -24,5 +24,5 @@
   "dependencies": {},
   "devDependencies": {},
   "peerDependencies": {},
-  "gitHead": "8948d665a96976b0817c0d8ce7e3c4009777e95a"
+  "gitHead": "32c35bd146dc1c22fc3c11d3e7ae018701ad3c4c"
 }

package/src/{%- project.name %}.ts

@@ -1,31 +1,29 @@
-import { requireNativeModule, NativeModulesProxy, EventEmitter, Subscription } from 'expo-modules-core';
+import { NativeModulesProxy, EventEmitter, Subscription } from 'expo-modules-core';
 
-import <%- project.name %>View, { <%- project.name %>ViewProps } from './<%- project.name %>View'
-
-// It loads the native module object from the JSI or falls back to
-// the bridge module (from NativeModulesProxy) if the remote debugger is on.
-const <%- project.name %> = requireNativeModule('<%- project.name %>');
+// Import the native module. On web, it will be resolved to <%- project.name %>.web.ts
+// and on native platforms to <%- project.name %>.ts
+import <%- project.name %> from './<%- project.name %>Module';
+import <%- project.name %>View from './<%- project.name %>View';
+import { ChangeEventPayload, <%- project.name %>ViewProps } from './<%- project.name %>.types';
 
 // Get the native constant value.
 export const PI = <%- project.name %>.PI;
 
+export function hello(): string {
+  return <%- project.name %>.hello();
+}
+
 export async function setValueAsync(value: string) {
   return await <%- project.name %>.setValueAsync(value);
 }
 
 // For now the events are not going through the JSI, so we have to use its bridge equivalent.
 // This will be fixed in the stable release and built into the module object.
-const emitter = new EventEmitter(NativeModulesProxy.<%- project.name %>);
-
-export type ChangeEventPayload = {
-  value: string;
-};
+// Note: On web, NativeModulesProxy.<%- project.name %> is undefined, so we fall back to the directly imported implementation
+const emitter = new EventEmitter(NativeModulesProxy.<%- project.name %> ?? <%- project.name %>);
 
 export function addChangeListener(listener: (event: ChangeEventPayload) => void): Subscription {
   return emitter.addListener<ChangeEventPayload>('onChange', listener);
 }
 
-export {
-  <%- project.name %>View,
-  <%- project.name %>ViewProps
-};
+export { <%- project.name %>View, <%- project.name %>ViewProps, ChangeEventPayload };

package/src/{%- project.name %}.types.ts

@@ -0,0 +1,7 @@
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export type <%- project.name %>ViewProps = {
+  name: string;
+};

package/src/{%- project.name %}Module.ts

@@ -0,0 +1,5 @@
+import { requireNativeModule } from 'expo-modules-core';
+
+// It loads the native module object from the JSI or falls back to
+// the bridge module (from NativeModulesProxy) if the remote debugger is on.
+export default requireNativeModule('<%- project.name %>');

package/src/{%- project.name %}Module.web.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from 'expo-modules-core';
+
+const emitter = new EventEmitter({} as any);
+
+export default {
+  PI: Math.PI,
+  async setValueAsync(value: string): Promise<void> {
+    emitter.emit('onChange', { value });
+  },
+  hello() {
+    return 'Hello world! 👋';
+  },
+};

package/src/{%- project.name %}View.tsx

@@ -1,9 +1,7 @@
 import { requireNativeViewManager } from 'expo-modules-core';
 import * as React from 'react';
 
-export type <%- project.name %>ViewProps = {
-  name: string;
-};
+import { <%- project.name %>ViewProps } from './<%- project.name %>.types';
 
 const NativeView: React.ComponentType<<%- project.name %>ViewProps> =
   requireNativeViewManager('<%- project.name %>');

package/src/{%- project.name %}View.web.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { <%- project.name %>ViewProps } from './<%- project.name %>.types';
+
+function <%- project.name %>WebView(props: <%- project.name %>ViewProps) {
+  return (
+    <div>
+      <span>{props.name}</span>
+    </div>
+  );
+}
+
+export default <%- project.name %>WebView;

package/tsconfig.json

@@ -5,5 +5,5 @@
     "outDir": "./build"
   },
   "include": ["./src"],
-  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__stories__/*"]
 }

package/babel.config.js

@@ -1,6 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
-};