@sleeperhq/mini-core 1.3.4 → 1.4.0

package/bin/build_mini.js

@@ -47,7 +47,8 @@ const getCommands = (projectName) => {
     --bundle-output "${bundleOutputPath[platform]}" \
     --sourcemap-output "${sourcemapOutputPath[platform]}" \
     --minify false \
-    --assets-dest "${assetsDestPath[platform]}"`;
+    --assets-dest "${assetsDestPath[platform]}" \
+    --webpackConfig ./node_modules/@sleeperhq/mini-core/webpack.config.js`;
   };
   
   // Exposed

package/declarations/sleeper_actions.d.ts

@@ -1,5 +1,6 @@
-import { NavigationTabId } from './types';
-export type SleeperActions = {
-    navigate: (navTabType: NavigationTabId, args?: any) => void;
-    requestLocation: () => void;
-};
+import { NavigationTabId, ToastConfig } from './types';
+export type SleeperActions = {
+    navigate: (navTabType: NavigationTabId, args?: any) => void;
+    requestLocation: () => void;
+    showToast: (toastData: ToastConfig) => void;
+};

package/declarations/switch/index.d.ts

@@ -0,0 +1,3 @@
+import { AppIconSwitch } from '../types/components/ui_2/app_icon_switch';
+export type { SwitchOption, Props as SwitchProps } from '../types/components/ui_2/app_icon_switch';
+export default AppIconSwitch;

package/declarations/types/components/ui_2/app_icon_switch.d.ts

@@ -0,0 +1,18 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type SwitchOption = {
+    colorToggleActive: string;
+    colorIconActive: string;
+    colorIconInactive: string;
+    iconStyle?: any;
+    icon: any;
+};
+export type Props = {
+    options: [SwitchOption, SwitchOption];
+    value?: number;
+    onChange?: (value: number) => void;
+    height?: number;
+    width?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+    toggleStyle?: StyleProp<ViewStyle>;
+};
+export declare const AppIconSwitch: any;

package/declarations/types/index.d.ts

@@ -1,4 +1,5 @@
 import { League, Roster, User, MatchupLeg, LeagueTransaction, Draft, DraftPick, RosterDraftPick, Player, Topic } from './shared/graphql.d';
+import type { ToastConfig as ToastConfigOriginal } from './utils/toast_helper';
 export type NavigationTabId = 'LeaguesIndexScreen' | 'LeaguesDetailScreen' | 'ScoreIndexScreen' | 'ScoreDetailScreen' | 'PicksIndexScreen' | 'FeedIndexScreen' | 'WebviewScreen' | 'ManageChannelsScreen' | 'InboxIndexScreen' | 'MinisIndexScreen' | 'ManageChannelsScreen' | 'InboxIndexScreen' | 'MinisIndexScreen';
 export * from './shared/graphql.d';
 export type LeagueId = string;
@@ -77,3 +78,6 @@ export type Location = {
     hasPermission: 'pending' | 'yes' | 'no';
 };
 export type VersionMap = Record<string, Mini>;
+export type ToastConfig = Omit<ToastConfigOriginal, 'icon'> & {
+    icon?: 'success' | 'error';
+};

package/declarations/types/utils/toast_helper.d.ts

@@ -0,0 +1,9 @@
+import { TextStyle, ViewStyle } from 'react-native';
+export type ToastConfig = {
+    text: string;
+    icon?: string;
+    time?: number;
+    style?: ViewStyle;
+    slideTop?: boolean;
+    textStyle?: TextStyle;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleeperhq/mini-core",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "Core library frameworks for developing Sleeper Mini Apps.",
   "main": "index.ts",
   "types": "index.d.ts",
@@ -33,37 +33,43 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "peerDependencies": {
+  "dependencies": {
     "@callstack/repack": "blitzstudios/repack.git#callstack-repack-v2.6.3-gitpkg",
+    "@callstack/repack-dev-server": "blitzstudios/repack.git#callstack-repack-dev-server-v1.0.7-gitpkg",
+    "@react-native-community/cli": "6.4.0",
+    "@react-native-community/cli-types": "6.0.0",
     "@react-native-community/netinfo": "9.3.7",
     "axios": "0.15.3",
-    "lodash": "4.17.21",
+    "babel-loader": "^8.2.5",
+    "react-native-fast-image": "8.5.11",
+    "react-native-interactable": "0.1.10",
+    "react-native-linear-gradient": "2.5.6",
+    "react-native-rename": "^3.2.12",
+    "react-refresh": "0.8.3",
+    "react-test-renderer": "17.0.2",
+    "terser-webpack-plugin": "^5.3.3",
+    "webpack": "^5.73.0"
+  },
+  "peerDependencies": {
     "react": "17.0.2",
     "react-native": "0.66.5",
-    "react-native-linear-gradient": "2.5.6",
-    "react-native-rename": "3.2.12",
-    "react-native-svg": "13.7.0",
-    "react-native-tcp-socket": "6.0.6",
-    "react-native-webview": "11.23.1"
+    "react-native-svg": "13.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@types/lodash": "^4.14.182",
-    "@types/react-native": "0.66.5",
+    "@types/react-native": "0.67.7",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.5",
     "eslint": "7.14.0",
     "jest": "^26.6.3",
+    "lodash": "4.17.21",
     "metro-react-native-babel-preset": "^0.66.2",
-    "react-test-renderer": "17.0.2",
-    "terser-webpack-plugin": "^5.3.3",
-    "typescript": "^4.7.2",
-    "webpack": "^5.73.0"
+    "react-native-tcp-socket": "6.0.6",
+    "typescript": "^4.7.2"
   },
   "resolutions": {
     "react-devtools-core": "~4.25.0",

package/src/components/index.tsx

@@ -3,6 +3,7 @@ import {TextProps, View} from 'react-native';
 import {Federated} from '@callstack/repack/client';
 import type {ButtonProps} from '../../declarations/button';
 import type {JerseyProps} from '../../declarations/jersey';
+import type {SwitchProps} from '../../declarations/switch';
 
 const _SleeperModule = React.lazy(() =>
   Federated.importModule('sleeper', 'index').catch(() => ({
@@ -31,6 +32,14 @@ const Text = (props: TextProps) => {
   );
 };
 
+const Switch = (props: SwitchProps) => {
+  return (
+    <React.Suspense fallback={<View />}>
+      <_SleeperModule component="Switch" {...props} />
+    </React.Suspense>
+  );
+};
+
 const Jersey = (props: JerseyProps) => {
   return (
     <React.Suspense fallback={<View />}>
@@ -39,5 +48,5 @@ const Jersey = (props: JerseyProps) => {
   );
 };
 
-export type {ButtonProps, TextProps, JerseyProps};
-export {Button, Text, Jersey};
+export type {ButtonProps, TextProps, JerseyProps, SwitchProps};
+export {Button, Text, Jersey, Switch};

package/src/dev_server/index.tsx

@@ -251,7 +251,7 @@ const DevServer = props => {
         let isInitialized = !!_dataRef.current?.dist;
 
         // Non-staging builds also require a version map to be defined.
-        if (!_dataRef.current?.isStaging) {
+        if (!_dataRef.current?.isStaging && !config.dev) {
           isInitialized = !!_versionMap.current;
         }
 

package/webpack.config.js

@@ -0,0 +1,307 @@
+const path = require('path');
+const TerserPlugin = require('../../../node_modules/terser-webpack-plugin');
+const Repack = require('../../../node_modules/@callstack/repack');
+const config = require('../../../app.json');
+const {dependencies} = require('../../../package.json');
+
+const sharedDeps = Object.keys(dependencies).reduce((acc, key) => {
+  acc[key] = {singleton: true, eager: true, requiredVersion: dependencies[key]};
+  return acc;
+}, {});
+
+const {samples, selectedSample} = config;
+const sampleClassPath = `../../../src/${samples[selectedSample]}`;
+const sampleClassPathLocal = `./src/${samples[selectedSample]}`
+
+/**
+ * More documentation, installation, usage, motivation and differences with Metro is available at:
+ * https://github.com/callstack/repack/blob/main/README.md
+ *
+ * The API documentation for the functions and plugins used in this file is available at:
+ * https://re-pack.netlify.app/
+ */
+
+/**
+ * Webpack configuration.
+ * You can also export a static object or a function returning a Promise.
+ *
+ * @param env Environment options passed from either Webpack CLI or React Native CLI
+ *            when running with `react-native start/bundle`.
+ */
+module.exports = env => {
+  const {
+    mode = 'development',
+    context = __dirname,
+    entry = './index.tsx',
+    platform,
+    minimize = mode === 'production',
+    devServer = undefined,
+    bundleFilename = undefined,
+    sourceMapFilename = undefined,
+    assetsPath = undefined,
+    reactNativePath = require.resolve('react-native'),
+  } = env;
+
+  if (!platform) {
+    throw new Error('Missing platform');
+  }
+
+  const dev = mode === 'development';
+
+  /**
+   * Using Module Federation might require disabling hmr.
+   * Uncomment below to set `devServer.hmr` to `false`.
+   *
+   * Keep in mind that `devServer` object is not available
+   * when running `webpack-bundle` command. Be sure
+   * to check its value to avoid accessing undefined value,
+   * otherwise an error might occur.
+   */
+  // if (devServer) {
+  //   devServer.hmr = false;
+  // }
+
+  /**
+   * Depending on your Babel configuration you might want to keep it.
+   * If you don't use `env` in your Babel config, you can remove it.
+   *
+   * Keep in mind that if you remove it you should set `BABEL_ENV` or `NODE_ENV`
+   * to `development` or `production`. Otherwise your production code might be compiled with
+   * in development mode by Babel.
+   */
+  process.env.BABEL_ENV = mode;
+
+  return {
+    mode,
+    /**
+     * This should be always `false`, since the Source Map configuration is done
+     * by `SourceMapDevToolPlugin`.
+     */
+    devtool: false,
+    context,
+    /**
+     * `getInitializationEntries` will return necessary entries with setup and initialization code.
+     * If you don't want to use Hot Module Replacement, set `hmr` option to `false`. By default,
+     * HMR will be enabled in development mode.
+     */
+    entry: [
+      ...Repack.getInitializationEntries(reactNativePath, {
+        hmr: devServer && devServer.hmr,
+      }),
+      entry,
+    ],
+    resolve: {
+      /**
+       * `getResolveOptions` returns additional resolution configuration for React Native.
+       * If it's removed, you won't be able to use `<file>.<platform>.<ext>` (eg: `file.ios.js`)
+       * convention and some 3rd-party libraries that specify `react-native` field
+       * in their `package.json` might not work correctly.
+       */
+      ...Repack.getResolveOptions(platform),
+
+      /**
+       * Uncomment this to ensure all `react-native*` imports will resolve to the same React Native
+       * dependency. You might need it when using workspaces/monorepos or unconventional project
+       * structure. For simple/typical project you won't need it.
+       */
+      // alias: {
+      //   'react-native': reactNativePath,
+      // },
+      alias: {
+        app: path.resolve(__dirname, sampleClassPath),
+      },
+    },
+    /**
+     * Configures output.
+     * It's recommended to leave it as it is unless you know what you're doing.
+     * By default Webpack will emit files into the directory specified under `path`. In order for the
+     * React Native app use them when bundling the `.ipa`/`.apk`, they need to be copied over with
+     * `Repack.OutputPlugin`, which is configured by default inside `Repack.RepackPlugin`.
+     */
+    output: {
+      clean: true,
+      path: path.join(__dirname, '..', '..', '..', 'build', platform),
+      filename: dev
+        ? 'index.bundle'
+        : platform === 'android'
+        ? 'index.android.bundle'
+        : 'index.ios.bundle',
+      chunkFilename: '[name].chunk.bundle',
+      publicPath: Repack.getPublicPath({platform, devServer}),
+    },
+    /**
+     * Configures optimization of the built bundle.
+     */
+    optimization: {
+      /** Enables minification based on values passed from React Native CLI or from fallback. */
+      minimize,
+      /** Configure minimizer to process the bundle. */
+      minimizer: [
+        new TerserPlugin({
+          test: /\.(js)?bundle(\?.*)?$/i,
+          /**
+           * Prevents emitting text file with comments, licenses etc.
+           * If you want to gather in-file licenses, feel free to remove this line or configure it
+           * differently.
+           */
+          extractComments: false,
+          terserOptions: {
+            format: {
+              comments: false,
+            },
+          },
+        }),
+      ],
+      chunkIds: 'named',
+    },
+    module: {
+      /**
+       * This rule will process all React Native related dependencies with Babel.
+       * If you have a 3rd-party dependency that you need to transpile, you can add it to the
+       * `include` list.
+       *
+       * You can also enable persistent caching with `cacheDirectory` - please refer to:
+       * https://github.com/babel/babel-loader#options
+       */
+      rules: [
+        {
+          test: /\.[jt]sx?$/,
+          include: [
+            /node_modules(.*[/\\])+react/,
+            /node_modules(.*[/\\])+@react-native/,
+            /node_modules(.*[/\\])+@react-navigation/,
+            /node_modules(.*[/\\])+@react-native-community/,
+            /node_modules(.*[/\\])+@expo/,
+            /node_modules(.*[/\\])+pretty-format/,
+            /node_modules(.*[/\\])+metro/,
+            /node_modules(.*[/\\])+he/,
+            /node_modules(.*[/\\])+abort-controller/,
+            /node_modules(.*[/\\])+@callstack\/repack/,
+            /node_modules(.*[/\\])+@sleeperhq\/mini-core/,
+          ],
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                'module:metro-react-native-babel-preset',
+                '@babel/preset-typescript',
+              ],
+              babelrc: false,
+              cacheDirectory: true,
+            },
+          },
+        },
+        /**
+         * Here you can adjust loader that will process your files.
+         *
+         * You can also enable persistent caching with `cacheDirectory` - please refer to:
+         * https://github.com/babel/babel-loader#options
+         */
+        {
+          test: /\.[jt]sx?$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                'module:metro-react-native-babel-preset',
+                '@babel/preset-typescript',
+              ],
+              // sourceType: "unambiguous",
+              /** Add React Refresh transform only when HMR is enabled. */
+              plugins:
+                devServer && devServer.hmr
+                  ? ['module:react-refresh/babel']
+                  : undefined,
+              babelrc: false,
+              comments: true, // necessary for named chunks
+              cacheDirectory: true,
+            },
+          },
+        },
+        /**
+         * This loader handles all static assets (images, video, audio and others), so that you can
+         * use (reference) them inside your application.
+         *
+         * If you wan to handle specific asset type manually, filter out the extension
+         * from `ASSET_EXTENSIONS`, for example:
+         * ```
+         * Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg')
+         * ```
+         */
+        {
+          test: Repack.getAssetExtensionsRegExp(Repack.SCALABLE_ASSETS),
+          use: {
+            loader: '@callstack/repack/assets-loader',
+            options: {
+              // In order to support single file bundle uploads through our submission process,
+              // we need to encode image dependencies directly into the main bundle file as base64.
+              inline: true,
+              platform,
+              devServerEnabled: Boolean(devServer),
+              scalableAssetExtensions: Repack.SCALABLE_ASSETS,
+            },
+          },
+        },
+        {
+          test: Repack.getAssetExtensionsRegExp(Repack.NON_SCALABLE_ASSETS),
+          use: {
+            loader: '@callstack/repack/assets-loader',
+            options: {
+              inline: false, // all other assets must be uploaded separately, as they cannot be inlined.
+              platform,
+              devServerEnabled: Boolean(devServer),
+              scalableAssetExtensions: Repack.SCALABLE_ASSETS,
+            },
+          },
+        },
+      ],
+    },
+    plugins: [
+      /**
+       * Configure other required and additional plugins to make the bundle
+       * work in React Native and provide good development experience with
+       * sensible defaults.
+       *
+       * `Repack.RepackPlugin` provides some degree of customization, but if you
+       * need more control, you can replace `Repack.RepackPlugin` with plugins
+       * from `Repack.plugins`.
+       */
+      new Repack.RepackPlugin({
+        context,
+        mode,
+        platform,
+        devServer,
+        output: {
+          bundleFilename,
+          sourceMapFilename,
+          assetsPath,
+        },
+        extraChunks: [
+          {
+            include: new RegExp('.*'),
+            type: 'remote',
+            outputPath: path.join(__dirname, '..', '..', '..', 'dist', config.name, platform),
+          },
+        ],
+        listenerIP: config.remoteIP,
+      }),
+
+      new Repack.plugins.ModuleFederationPlugin({
+        name: config.name,
+        exposes: {
+          app: sampleClassPathLocal,
+        },
+        shared: {
+          // Adding this here fixes the named chunks problem.
+          // It also makes sure any third party javascript packages are included in the container,
+          // not exported to a separate chunk.
+          // The only separate chunk is the exposed stuff.
+          ...sharedDeps,
+          // if we don't do the above, then instead each package that is not included in this list will
+          // split off into a seperate chunk, and named chunks will break (assume that's a bug that we can fix).
+        },
+      }),
+    ],
+  };
+};

package/declarations/types/redux/native_nav/constants.d.ts

@@ -1,31 +0,0 @@
-export declare const NAVIGATION_TYPE: {
-    readonly DM: "DM";
-    readonly INBOX: "INBOX";
-    readonly MY_FEED: "MY_FEED";
-    readonly FRIENDS: "FRIENDS";
-    readonly LEAGUE: "LEAGUE";
-    readonly ASYNC_SPORT: "ASYNC_SPORT";
-    readonly CREATE_LEAGUE: "CREATE_LEAGUE";
-    readonly LEAGUE_SYNC: "LEAGUE_SYNC";
-    readonly DRAFTBOARDS: "DRAFTBOARDS";
-    readonly SOLO_OVER_UNDER: "SOLO_OVER_UNDER";
-    readonly CHANNEL: "CHANNEL";
-    readonly MANAGE_CHANNELS: "MANAGE_CHANNELS";
-};
-export declare const NAVIGATION_ID: {
-    readonly DRAFTBOARDS: 1;
-    readonly CREATE_DM: 2;
-    readonly DM_SCREEN: 3;
-    readonly CREATE_LEAGUE: 4;
-    readonly MY_FEED: 5;
-    readonly MENTIONS: 6;
-    readonly FRIENDS: 7;
-};
-export declare const NAVIGATION_TAB_ID: {
-    readonly FantasyTab: "FantasyTab";
-    readonly ScoresTab: "ScoresTab";
-    readonly GamesTab: "GamesTab";
-    readonly FeedTab: "FeedTab";
-    readonly InboxTab: "InboxTab";
-    readonly MinisTab: "MinisTab";
-};