No hooks for Platform specific UI

[mix3d]

I found the build script to be a bit lacking; there's no support for building the Material UI for android builds and Apple design for iOS builds.

Here's what worked for me, but I doubt it's a "best practices" approach.

---

Split main.js into a main.ios.js and main.android.js. The latter has the suggested material:true and correct CSS uncommented and iOS removed. All your Vue components should handle multi-platform builds already. (using v-if="$theme.material" where needed, etc)

hookers.js add to sys object a new function to check if a certain platform is being run. Note: If building both iOS and Android in one command, (cordova build ios android), platforms will have both values. For this function, it only checks if the specified platform is a part of the command, not if it is the only platform.

checkPlatform(name) {
    return (
        typeof ctx.opts !== 'undefined' &&
        typeof ctx.opts.platforms !== 'undefined' &&
        (
            Array.isArray(ctx.opts.platforms) &&
            ctx.opts.platforms.indexOf(name) > -1 ||
            ctx.opts.platforms[name] === true
        )

    )
},

and change the startWebpackBuild function to take an isAndroid parameter, and use it for the exec command. (Webpack 2.0 requires passed args through the --env. prefix)

startWebpackBuild(isRelease, isAndroid) {
    ...
     exec(`"${wpPath}"` + (isRelease ? ' --env.release' : '') + (isAndroid ? ' --env.android':' --env.ios'), {cwd: pRoot, maxBuffer: 1024 * 1024 * 5}, 
    ...
}

then, using isAndroid = sys.checkPlatform('android'), you update the call with our new value sys.startWebpackBuild(isRelease, isAndroid))

Now that webpack knows which platform it is building for, move the definition of the entryFile variable inside the config function, and update as follows:

webpack.config.js

let config = function (env) {
    let entryFile = path.join(__dirname, env.android ? 'src/main.android.js' : 'src/main.ios.js')
    ....

Now you are building the platform correctly!

Background: I tried to do conditional imports inside the main.js (and therefore bypass all this by setting the needed values on runtime), but was unable to get a webpack / component-ey version working. This approach works for my needs, and hopefully can help someone else trying to have one codebase for platform agnostic native UI, (even if its a little contrived to get the variables into webpack and ultimately the F7+Vue App)

[caiobiodere]

@mix3d are you still looking for this solution or did you find anything else?

[mix3d]

The solution I posted worked for me, and I moved on. I would still love to see a better approach, however, but this was also f7 1.x and not 2.x

[caiobiodere]

@mix3d I will work through your way if I find anything else I will tell you