sg-import-plugin v1.0.1

ts-import-f7-plugin

typescript import framework7 on demand. help that import css file.

Requirements

//tsconfig.json
{
  "compilerOptions": {
    // ...
    "paths": {
      "@/*": ["src/*"]
    }
    // ...
  }
}

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "../src"),
    },
  },
  // ...
};

clone githut repository "seanyujc/framework7.git". checkout branch "v5".

git clone https://github.com/seanyujc/framework7.git
git checkout v5

Copy "core" and "vue" directory in packages to your project directory. Make sure the directory structure is "src/lib/framework7/core" and "src/lib/framework7/vue".

Usage

Import global styles:

import "@/lib/framework7/core/framework7.less"

Using plugin:

const { ComponentsTransformFactory } = require("ts-import-f7-plugin");
module.exports = {
    // ...
    {
        test: /\.tsx?$/,
        use: [
            {
            loader: "awesome-typescript-loader",
            options: {
                getCustomTransformers: (program) => ({
                    before: [ComponentsTransformFactory],
                }),
            },
            },
        ],
    },
    // ...
}

before:

import { f7Input } from "@/lib/framework7/vue/framework7-vue.esm";
import DialogComponent, {
  Dialog,
} from "@/lib/framework7/core/components/dialog/dialog";

Framework7.use(DialogComponent);

after:

import { f7Input } from "@/lib/framework7/vue/framework7-vue.esm";

import "@/lib/framework7/core/components/input/input";
import "@/lib/framework7/core/components/dialog/dialog";