On this page
Ray Compilation PluginsRay Runtime PluginsWeChat MiniApp PluginWeChat MiniApp Subpackage with its Plugin

Plugins

Ray Compilation Plugins

ray.config.ts
// ray.config.ts
import { RayConfig } from '@ray-js/types';

// A plugin is essentially an object, and the specific configuration can be found in the RayConfig TypeScript type
const config: RayConfig = {
  plugins: [
    // Can be a file that exports a plugin object
    require.resolve('./plugin'),

    // Can be a function
    () => {
      return {
        name: 'aaaa',
        configWebpack({ config }) {},
      };
    },
    // Can be an object
    {
      name: 'plugin name',
    },
  ],
};
export default config;

Ray Runtime Plugins

ray.config.ts
// ray.config.ts
import { RayConfig } from '@ray-js/types';

// A plugin is essentially an object, and the specific configuration can be found in the RayConfig TypeScript type
const config: RayConfig = {
  plugins: [
    {
      // Runtime plugins can only be functions that return the absolute path of the runtime module
      registerRuntimePlugin() {
        return require.resolve('./runtime');
      },
    },
  ],
};
export default config;

WeChat MiniApp Plugin

src/routes.config.ts
// src/routes.config.ts
import { PluginOfMini, SubPackages } from '@ray-js/types';

export const plugins: PluginOfMini = {
  'hello-plugin22': {
    version: 'dev',
    provider: 'wxf1eb515130875231',
  },
};

export const subPackages: SubPackages = [
  {
    root: 'packageA',
    pages: [
      {
        route: '/a/:uid',
        path: '/pages/a/index',
      },
      {
        route: '/b',
        path: '/pages/b/index',
      },
    ],
    // Plugins in the subpackage
    plugins: {
      // The provider of plugins in the subpackage and the main package cannot be the same
      'hello-plugin22': {
        version: 'dev',
        provider: 'wxf1eb515130875231',
      },
    },
  },
];

// src/pages/index
// Usage
import { View } from '@ray-js/ray';
import { requirePlugin, requirePluginComponent } from 'ray/macro';

// Plugin interfaces exposed
const pluginApi = requirePlugin('hello-plugin22');
pluginApi.xxx();

// Plugin components exposed
const PluginComponent = requirePluginComponent('hello-plugin22/component');

const Demo = () => {
  return (
    <View>
      <PluginComponent />
    </View>
  );
};

WeChat MiniApp Subpackage with its Plugin

src/routes.config.ts
// src/routes.config.ts
import { View, router } from '@ray-js/ray';
import { SubPackages, Routes } from '@ray-js/types';

export const routes: Routes = [
  {
    route: '/home',
    path: '/pages/index',
  },
];
export const subPackages: SubPackages = [
  {
    root: 'packageA',
    pages: [
      {
        route: '/b',
        path: '/pages/b/index',
      },
    ],
  },
];

// src/pages/index
const Demo = () => {
  return (
    <View>
      <View onClick={() => router.push('/b', { subpackage: 'packageA' })}>
        Subpackage Page Jump
      </View>
      <View onClick={() => router.push('/home')}>Main Package Page Jump</View>
    </View>
  );
};