Neverending Prototype Mode

    @minar-kotonoha/vue-native-scripts

    0.1.4 • Public • Published

    vue-native-scripts

    This package is auto-generated. For pull requests please work with src/platforms/vue-native/scripts/index.js.

    Compile and transform Vue components to React Native.

    Find the vue-native-core repository here.

    For the official documentation, visit this website.

    Usage

    Vue Native CLI is the recommended way to setup a new Vue Native project. However, if you wish to setup a project from scratch, use the following steps after setting up a React Native / Expo project.

    Step 1: Install

    The following packages are required as runtime dependencies by Vue Native:

    During development, another package is required to transpile Vue Native component files (with .vue extensions) into JS:

    To install them, run the following commands in your project directory

    $ npm install --save vue-native-core vue-native-helper
    $ npm install --save-dev vue-native-scripts
    

    Step 2: Configure the React Native bundler

    The Metro bundler is used by React Native to generate app bundles. It can be configured using a metro.config.js file. Add the following to your metro.config.js (make one to your project's root if you don't have one already):

    const { getDefaultConfig } = require("metro-config");
    
    module.exports = (async () => {
      const {
        resolver: { sourceExts }
      } = await getDefaultConfig();
      return {
        transformer: {
          babelTransformerPath: require.resolve("./vueTransformerPlugin.js"),
          getTransformOptions: async () => ({
            transform: {
              experimentalImportSupport: false,
              inlineRequires: false,
            },
          })
        },
        resolver: {
          sourceExts: [...sourceExts, "vue"]
        }
      };
    })();

    The babelTransformPath property above takes the path to the transformer you wish to use. In our case, we need to create a vueTransformerPlugin.js file to the project's root and specify supported extensions:

    // For React Native version 0.59 or later
    var upstreamTransformer = require("metro-react-native-babel-transformer");
    
    // You will need to use different transformers for different React Native versions
    // However, versions older than v0.59 are no longer supported by Vue Native
    
    // For React Native version 0.56 - 0.58
    // var upstreamTransformer = require("metro/src/reactNativeTransformer");
    
    // For React Native version 0.52 - 0.55
    // var upstreamTransformer = require("metro/src/transformer");
    
    // For React Native version 0.47 - 0.51
    // var upstreamTransformer = require("metro-bundler/src/transformer");
    
    // For React Native version 0.46
    // var upstreamTransformer = require("metro-bundler/build/transformer");
    
    var vueNaiveScripts = require("vue-native-scripts");
    var vueExtensions = ["vue"]; // <-- Add other extensions if needed.
    
    module.exports.transform = function({ src, filename, options }) {
      if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
        return vueNaiveScripts.transform({ src, filename, options });
      }
      return upstreamTransformer.transform({ src, filename, options });
    };

    This file conditionally transforms files based on their extensions. vue-native-scripts is used for .vue files, while the stock React Native Babel transformer is used for other (JS) files.

    Using Vue Native components and .vue files

    In the React Native application, you can simply import your Vue components as follows

    import VueComponent from './VueComponent.vue'
    

    There should be a file named VueComponent.vue in the corresponding folder; the transformer parses this file and sends it to the React Native bundler.

    Keywords

    none

    Install

    npm i @minar-kotonoha/vue-native-scripts

    DownloadsWeekly Downloads

    0

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    23.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • chengzhuo5