Develop Reference

Is it possible to create an Electorn application that compiles only to the platform code?

I will clarify my question for a very specific use case.
Let's say, I've designed my code as follows:
And this is the content:
src/inner/inner.darwin.ts:
export default function logger() {
console.log('Darwin Logger');
}
src/inner/inner.windows.ts:
export default function logger() {
console.log('Windows Logger');
}
src/inner/inner.ts:
NOTE the export default - it is mandatory
import LOGGER from '???????????';
export default class A {
public static logger() {
LOGGER();
}
}
So basically, when I compile Windows code, I want to import the inner.windows.ts code. When using Mac code - inner.darwin.ts code.
I do know I can control excluded files in tsconfig.json.
So when I'm going to create Windows application I will code:
"exclude": ["**/*.darwin.ts"]
And when I will create Mac one:
"exclude": ["**/*.windows.ts"]
However, it did not help for resolving the import issue.
I do know I can run code depends on the underlying platform using process.platform, but it does not do the job. I want the output Windows application to be more small of size - and ignore any Mac code. If I'd use this process.platform - the Mac code would still exist in the underlying Windows application.
Any advice?
Can Webpack do something to help?
I am open for any code changes as long as the code is well defined and split, and the final outcome is that I have only Darwin code and Windows code

So the solution is quiet simple. All I had to do is using a Webpack plugin.
The best Plugin to fit this task is NormalModuleReplacementPlugin which is provided out of the box by Webpack itself.
The exclude in tsconfig.ts is no longer reasonable within this solution.
Simply provide the following plugin:
new webpack.NormalModuleReplacementPlugin(
/darwin/,
function (resource) {
resource.request = resource.request.replace(
/darwin/,
'windows',
);
}
),
This will override any import to a darwin file into a winodws file.
Now, in development, both files exist - but in compilation - only either of them will exist.
inner.ts simply becomes:
import LOGGER from './inner.darwin';
export default class A {
public static logger() {
LOGGER();
}
}
Of course that could be quiet cumbersome to go into webpack.config.ts each build, so we could definitely run some extra webpack script to decide upon which underlying build to go with, for example:
const appTarget = env.APP_TARGET || 'darwin';
And then simply use this variable within the plugin, and run your npm build script providing an APP_TARGET argument.

Import typescript files based on naming convention in React Native

So I have three ts files named as below :
MyModule.ios.ts
MyModule.android.ts
MyModule.ts ( this is empty )
first two files have a method named : setup() which need to run based on platform Also metro bundler will do the resolution, it will try to import .ios when building for ios and .android when building for android..
and I have another file which import this method like this :
import { setup } from 'MyModule';
the problem is, I am not sure if this will resolve the .android and .ios files. What is the proper way to do this kind of code splitting?
I find this workaround here but I was wondering if there is a better way : https://github.com/Microsoft/TypeScript/issues/8328#issuecomment-219583152

If you want to use separate files for iOS and Android, you need to call them MyModule.ios.ts and MyModule.android.ts extensions. The empty MyModule.ts file is not necessary.
Then just import them as if they didn't have the platform specific extensions. React Native will automatically pick up the right file based on the running platform.
import { setup } from './MyModule'; // Will automatically import either MyModule.ios.ts or MyModule.android.ts
See the documentation on this: https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions
If you don't want to use separate files, you can use the Platform module. This is nice for small pieces of code that you want to make platform specific.
import { Platform } from 'react-native';
if(Platform.OS === 'ios') {
// iOS specific code here
} else if(Platform.OS === 'android') {
// Android specific code here
} else {
// Other platform
}
See: https://facebook.github.io/react-native/docs/platform-specific-code#platform-module

DWT Java Script Library Progress Dialogue Automatically Displays with Angular 5

I am incorporating the Dynamic Web Twain javascript library into my angular application to allow my end users to scan using a web browser instead of a desktop application.
Upon loading the page, the progress bar immediately pops up. This is not expected behavior, nor does it happen when I use angular 4. I am using angular 5 at work. It also makes no difference which browser I use (IE, Chrome, Firefox).
The version of my Angular is:
> Angular CLI: 1.6.6 Node: 9.4.0 OS: win32 x64 Angular: 5.2.3 ...
> animations, common, compiler, compiler-cli, core, forms ... http,
> language-service, platform-browser ... platform-browser-dynamic,
> router
>
> #angular/cli: 1.6.6 #angular-devkit/build-optimizer: 0.0.42
> #angular-devkit/core: 0.0.29 #angular-devkit/schematics: 0.0.52
> #ngtools/json-schema: 1.1.0 #ngtools/webpack: 1.9.6
> #schematics/angular: 0.1.17 typescript: 2.5.3 webpack: 3.10.0
I have included the javascript library into my newly created Angular project using these commands:
npm install dwt --save
npm install #type/dwt --save
Also note that my webtwain.min.js is added to the scripts within my angular-cli.json:
"scripts": [
"../node_modules/dwt/dist/dynamsoft.webtwain.min.js"
Here is the layout of my project:
Finally, here is my component.ts file and its related html (it doesn't matter how I populate the html, the result is the same):
/// <reference types="dwt" />
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-scan',
template: '<button (click)="acquireImage()">Scan Document</button><div id="dwtcontrolContainer"></div>',
styleUrls: ['./scan.component.css']
})
export class ScanComponent implements OnInit {
constructor() { }
ngOnInit() {
}
acquireImage(): void {
const dwObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
dwObject.IfShowIndicator = false;
const bSelected = dwObject.SelectSource();
if (bSelected) {
const onAcquireImageSuccess = () => { dwObject.CloseSource(); };
const onAcquireImageFailure = onAcquireImageSuccess;
dwObject.OpenSource();
dwObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
}
}
}
Finally here is the result:
The 'progressbar' shown with a value of 0% pops up immediately. In angular 4, this does not happen. Any thoughts on what is causing this? I am trying to read up on the changes between 4 and 5, specifically asynchronous and synchronous loading but I am still new to this framework.
Thanks,
Josh

This is Tom from Dynamsoft.
What you posted here is a known issue in v13.3 of the SDK Dynamic Web TWAIN.
Here is the fix
Update CSS (dynamsoft_dwt_html5.css) to add the following
dialog[closed] {
display: none;
}
Update dynamsoft.webtwain.initiate.js to apply the new CSS rule
m.showDialog=function(y){var z=this,v;if(z.open){j.error("showDialog called on open dialog.");return}z.open=i;z.removeAttribute("closed");
m.closeDialog=function(t){var v=this;if(!v.open){j.error("closeDialog called on closed dialog.")}v.open=o;v.removeAttribute("open");v.setAttribute("closed","closed");
y.push('<dialog class="dynamsoft-dwt-dialogProgress" closed="closed" style="top:30%">
Since the code is minimized, it might look different in your own copy of the JS, if you like, you can email our support team (support#dynamsoft.com, if possible, please use your business email address) for the patch. Thanks.
BTW, the patch will be part of v13.4 soon to be released.

Relative import of platform specific ios/android typescript files for React-Native app

I have a component that has 2 different designs based on the platform for React-Native: MyComponent.ios.tsx and MyComponent.android.tsx.
Although when I import my component into MyView.tsx, it complains.
MyView.tsx(5,38): error TS2307: Cannot find module './MyComponent'.
I have tried to modify my tsconfig file paths to the following:
"paths": {
"*": ["*", "*.ios", "*.android"]
},
Although I still have the same problem.
Does any of you know how to resolve this problem?
Thanks

Basically this approach won't work for one reason, once your ts files are transpiled, the relative path is not there anymore for the compiler to add ".ios" or ".android" and stop complaining, so the output will not work on react-native side when reading the pure JS.
I got it working by creating a typings (MyComponent.d.ts) file in the same folder, ex:
// This file exists for two purposes:
// 1. Ensure that both ios and android files present identical types to importers.
// 2. Allow consumers to import the module as if typescript understood react-native suffixes.
import DefaultIos from './MyComponent.ios';
import * as ios from './MyComponent.ios';
import DefaultAndroid from './MyComponent.android';
import * as android from './MyComponent.android';
declare var _test: typeof ios;
declare var _test: typeof android;
declare var _testDefault: typeof DefaultIos;
declare var _testDefault: typeof DefaultAndroid;
export * from './MyComponent.ios';

Since TypeScript 4.7 there is now a new option to handle this for react native, but also web
{
"compilerOptions": {
"moduleSuffixes": [".android", ".ios", ""]
}
}
You can read more about it here:
https://www.typescriptlang.org/tsconfig#moduleSuffixes

Ionic 2: best way to check if is running in browser environment

I can't find out in the docs which is the best way to know, in an Ionic 2 app, if it's runnning in the browser (with the ionic serve command) or in the device/emulator.
Actually what I'm doing is check if the window object has an 'plugins' attribute, but I don't know if there is the best way.
if(!window['plugins']) {
//browser
}

Oh, I found in the docs the Platform object, which has some methods.
http://ionicframework.com/docs/v2/api/platform/Platform/
One is the is(key), that can match
import { Platform } from 'ionic-angular';
#Component({...})
export MyPage {
constructor(platform: Platform) {
this.platform = platform;
...
if(this.platform.is('core')) {
//it's in the browser
}
}
}

while the question is a bit old but still valid - one more option is to use
https://ionicframework.com/docs/native/device/ - the Device object provides platform property which is equal to 'browser' on browser. The plugin is available only when running webapp via cordova.

Just to add a little more to the solution given above, the following does seem to work ok:
import { Platform } from 'ionic-angular';
#IonicPage()
#Component({})
export class WhichPlatformPage {
isApp: boolean;
constructor(private platform: Platform) {
this.isApp = this.platform.is('core') || this.platform.is('mobileweb') ? false : true;
}
}
ionViewDidLoad() {
console.log(this.isApp ? 'Running from mobile' : 'Running from the browser');
}
This seems to work fine for me - the main difference from the previous answer is that we are also checking for the 'mobileweb' platform.
Interestingly, if you are using the ionic cordova build browser command, 'mobileweb' becomes 'mobile' - breaking this solution - as this is trying to emulate being on a device as much as possible. This was raised as an issue on GitHub here:
https://github.com/ionic-team/ionic/issues/11557
A solution was given as setting isApp with the following:
this.isApp = !document.URL.startsWith('http');
This works because the mobile apps start their pages with the 'file' protocol. However, if you read into the issue, Ionic are actually recommending against using the cordova browser platform currently, so you would be better off with the original solution.

Thought I'd update with an answer that works in case anyone arrives at this question.
This works as of the latest iOS and Android builds:
public isApp(): boolean {
return (
document.URL.indexOf('http://localhost') === 0 || // Android
document.URL.indexOf('ionic') === 0 || // iOS 11+ Ionic Web View
document.URL.indexOf('https://localhost') === 0 // iOS 10 Ionic Web View
);
}
See Ionic Webview readme for more info and caveats.

I found this solution resolved in Ionic forum which is using
this.isApp = (!document.URL.startsWith('http') || document.URL.startsWith('http://localhost:8080'));
it may have changes in the future releases though as ios/androd new release change comes
details discussed https://forum.ionicframework.com/t/how-to-determine-if-browser-or-app/89149/15