Allow custom build

[dalisoft]

Problem description

I cannot run my own build for dev-app and cloud build.

Expected behavior

I have own customized tabris.js build and want to run, but when dev app loads says cannot find module tabris.

Environment

• Tabris.js version: Own build (based on 2.0-RC2)
• Device: Samsung Galaxy Note3 Neo, Iphone 6S+
• OS: Android 5.1, iOS 10.3.2

Code snippet

// A minimal, *self-contained* code snippet to reproduce the problem:

[mpost]

What error do you see?

[cpetrov]

How do you declare the "tabris" dependency in your package.json?

[cookieguru]

Also, posting the build log containing the portion that performs npm install would be useful.

[dalisoft]

Check out this. Custom build of tabris.js. Declare like tabris.js. This demo for original (old version app): https://github.com/dalisoft/tabris-ds-app

[cookieguru]

Without seeing the build log I can't say why it's failing, but looking at the package.json:

"dependencies": {
    "tabris": "^2.0.0-rc1"
  },

You aren't declaring your fork, so NPM is just going to install from the registry

[cpetrov]

@dalisoft If tez-native is the Tabris.js fork, you have to update your tabris dependency in your app's package.json to point to your forked Tabris.js version. If you have not released a npm module yet, you can reference your GitHub repository:

package.json

"dependencies": {
  "tabris": "dalisoft/tez-native"
}

See https://docs.npmjs.com/files/package.json#github-urls

[dalisoft]

I haven't been in my pc few hour ago, now in my pc, so i share the code.

package.json

{
  "name": "my-sample-app",
  "version": "0.1.0",
  "main": "dist.js",
  "private": false,
  "scripts": {
    "test": "eslint .",
    "start": "tabris serve",
    "build": "rollup -c --environment BUILD:prod",
    "source": "rollup -c",
    "prepublish": "npm run source && npm run build",
    "dev": "rollup -c -w"
  },
  "dependencies": {
    "es6-tween": "latest",
    "socket.io-client": "latest",
    "tez-native": "latest"
  },
  "devDependencies": {
    "eslint": "^3.19.0",
    "rollup": "^0.41.6",
    "rollup-plugin-buble": "^0.15.0",
    "rollup-plugin-uglify": "^2.0.1",
    "rollup-watch": "^3.2.2",
    "uglify-es": "^3.0.11",
    "socket.io": "^2.0.3" // NOT REALISED YET
  }
}

rollup.config.js

import buble from 'rollup-plugin-buble';
import uglify from 'rollup-plugin-uglify';
import io from 'socket.io';
import {
    minify
}
from 'uglify-es';
const fs = require('fs');

let pkg = require('./package.json');
let external = Object.keys(pkg.dependencies);

const {
    BUILD
} = process.env;

fs.watchFile('app.js', (curr, prev) => {
  io.emit("browserReload");
});

const plugins = [buble({
        jsx: 'JSX.createElement',
        transforms: {
            forOf: false
        }
    })];

if (BUILD === 'prod') {
    plugins.push(uglify({}, minify));
}

export default {
    entry: 'app.js',
    format: 'iife',
    dest: 'dist.js', // equivalent to --output
    globals: {
        //'tabris': 'Tabris',
        'es6-tween': 'TWEEN'
    },
    moduleName: 'App',
    external,
    //exports: 'default',
    plugins: plugins
}

app.js

const { update, Tween, Easing } = require('es6-tween');
const { Animation, Page, WebView, Component, TextView, Picker, Text, ScrollView, TabFolder, Tab, Composite, Image, ImageView, NavigationView, CollectionView, Action, Drawer, PageSelector, Button, ui } = require('tez-native');
const socket = require("socket.io-client")("http://192.168.1.100:8080");

const navigationView = <NavigationView left={0} top={0} right={0} bottom={0}/>.appendTo(ui.contentView);
const Page1 = <Page title="Page"/>.appendTo(navigationView);
const textView = <TextView left={20} top={20} right={20} text="Touch anywhere..."/>.appendTo(Page1);

let timeStart = Date.now();
setInterval(() => {
    update(Date.now() - timeStart);
}, 0);

const Data = {
    initLeftState: 16
};

const Btn = <Button text="Go back" left={Data.initLeftState} top={[textView, 10]} right={16}/>.on('longpress', ({target, state}) => {

    target.left = Data.initLeftState;
    let tween1 = new Tween(target).to({left:100}, 1000).repeat(1).yoyo(true).easing(Easing.Bounce.InOut).on('update', ({left}) => {
        textView.text = JSON.stringify({left, state});
    });
    if (state === 'start') tween1.start();

}).appendTo(Page1);

ui.contentView.on({
    longpress: ({touches}) => {
        textView.text = JSON.stringify(touches);
    }
});

// Hot-Reload implementation
socket.on("browserReload", function() {
    document.location.reload(true);
});

There i used socket.io for hot-reload implementation, now not work, but should work, researched much time and has idea about it. So with hot-reload not tested yet on device, original tabris works fine, but my own custom build would be better because i can do everything starting from svg to hot-reload

[ralfstx]

You're missing the tabris dependency. Run:

npm install --save tabris@latest

[dalisoft]

I tried not works, anyway i am loading widgets from tez-native. Dependecy for tez-native or for my app?

[cookieguru]

@dalisoft Can you post your build log somewhere and link it here?

[dalisoft]

On npm no errors, but for mobile says cant find module tabris

[cookieguru]

@dalisoft Can you post your full build log and link it here?

[dalisoft]

Ok, i will do this. Wow. Amazing, swipe to left from "dev-app" gives me bit more information about errors and makes development easier

[dalisoft]

I think may be working local build, but it's not working. Here log:

D:\GitHub\Apps\Tabris\es6>tabris build android
Missing cordova platform spec, expected in $TABRIS_ANDROID_PLATFORM

I am added the platform specified folders to "E:\SDK\TABRIS_{OS}" and added set like this

ENVORIMENT VARS (Computer > Properties > Advanced > Envoriment):
TABRIS_ANDROID_PLATFORM=E:\SDK\TABRIS_ANDROID
TABRIS_IOS_PLATFORM=E:\SDK\TABRIS_IOS
TABRIS_WINDOWS_PLATFORM=E:\SDK\TABRIS_WINDOWS

Installed:

• Android Studio Latest
• Android SDK Latest
• Android NDK Latest
• Appcelerator Studio Latest
• Titanium SDK Latest
• Alloy Latest
• Hyperloop Latest
• NativeScript Latest
• Cordova Latest
• NPM Latest
• Windows7 x32(x86) Ultimate SP1 ( Latest + Latest Updates )

NOTE: I am choosing this library over React-Native, NativeScript, Alloy+Titanium+Hyperloop, Ionic because it's very lightweight, fast and easy and even works on my laptop (11-years old laptop). I am want all of my needs and this app would be complex over these all, even supports SVG Path Morphing. I am after doing/implementing these features want become Tabris App Development developer (wish/dream come true someday :+1: )

[dalisoft]

My build never completes

My App and Own build(changed after last slow build, now builds very fast and almost no-dependecy, fits my needs)

[cpetrov]

@dalisoft Please restart your shell after setting the environment variable. Verify that the environment variable is set by running following commands in your terminal:

• If you use the Windows command prompt:

  set TABRIS_ANDROID_PLATFORM

• If you use a bash shell:

  echo $TABRIS_ANDROID_PLATFORM

[dalisoft]

@cpetrov

C:\Users\Dalerjon>set TABRIS_ANDROID_PLATFORM
TABRIS_ANDROID_PLATFORM=E:\SDK\TABRIS_ANDROID

C:\Users\Dalerjon>

This gives me real path

[cpetrov]

@dalisoft I couldn't reproduce your CLI issue with the latest tabris-cli version (0.6.0) on Windows 10. Do you use the latest CLI?

[dalisoft]

@cpetrov Yes i am running latest CLI

[dalisoft]

@cpetrov Here log of online build, https://pastebin.com/6Z1djQ9Z. It's after my customized own build

[dalisoft]

I have fixed the local my issues and now i building app from local my app. Now someone can teach me how to run own build to it?

[cookieguru]

@dalisoft Looking at your build log:

The command "travis_wait 40 grunt build deploy" exited with 137.
Done. Your build exited with 1.

This has come up once before (#1181). You likely have too many dependencies and the cloud build times out.

If you're only modifying the JS, you might just try serving your fork locally with tabris serve.

[dalisoft]

I have fixed this issue, now at dev-app console shows Coud not load module: Error: Cannot append to non-widget at NavigationView.appendTo (tezNative:2300:13). It refers to to my js, here link to my js

[dalisoft]

As now this issue was not for now. I fixed