I want to use BPMN.io library to create modifications of BPMN modeling elements.
How do I set up a development environment with the folders bpmn-js, bpmn-moddle and diagram-js, such that I can modify any of the source files?
Please contact gwagner57#googlemail.com, if you can do this for me as a paid job.
This example extends the bpmn-js viewer via custom modules and shows how Rollup can be used to generate a UMD bundle of that custom viewer.
Create a sub-class of Viewer or Modeler, depending on which variant you would like to extend:
import inherits from 'inherits';
import Viewer from 'bpmn-js/lib/Viewer';
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
import CustomLoggingModule from './features/logging';
/**
* A viewer that includes mouse navigation and other goodies.
*
* #param {Object} options
*/
function CustomViewer(options) {
Viewer.call(this, options);
}
inherits(CustomViewer, Viewer);
module.exports = CustomViewer;
Add additional modules to your custom bpmn-js prototype:
CustomViewer.prototype._customModules = [
ZoomScrollModule,
MoveCanvasModule,
CustomLoggingModule
];
CustomViewer.prototype._modules = [].concat(
Viewer.prototype._modules,
CustomViewer.prototype._customModules
);
Package the file as UMD for the browser, using a module bundler such as Rollup, Browserify or Webpack.
We're using rollup to bundle the files based on this configuration:
rollup -c
Include the bundle in your webpage, as you would include our pre-package distributions:
<script src="dist/custom-viewer.bundled.js"></script>
<script>
var viewer = new CustomBpmnJS({
container: '#canvas'
});
// ...
</script>
Build this Example:
npm install
npm run all
License:
MIT
Related
I am going to develop a very large application using Angular 7 Framework.
I have created a blank angular workspace using
ng new angular-app --create-application=false
And in this workspace I have two angular applications created using the following commands:
ng generate application app-one
ng generate application app-two
Inside each of the two applications, I am going to have multiple components each working independently of each other.
I am looking for a way to create a separate javascript build file for each of the component so as to reduce the build size.
And use each of the separately build js files to use each component as a web component.
Please read what I have already tried to get a better idea.
I have tried the following steps:
Create a repository with prefix custom for custom angular elements:
ng new app-name --prefix custom
Add the angular elements package:
ng add #angular/elements
Create custom element component with encapsulation as native/emulated/none as required:
ng g component my-component --inline-style --inline-template -v Native
Define the custom element in app.modulte.ts
import { Injector} from '#angular/core';
import { createCustomElement } from '#angular/elements';
...
export class AppModule {
constructor(private injector : Injector){
const el = createCustomElement(MyComponent, {injector : this.injector});
customElements.define('my-component',el);
}
ngDoBootstrap(){ }
}
Install ngx-build-plus package for building a single bundle (e. g. for Angular Elements):
npm i ngx-build-plus
Update application's builder section within the angular.json file so that it points to ngx-build-plus:
"builder": "ngx-build-plus:build",
Add script in package.json to run builder:
"build:ngx": "ng build --prod --output-hashing none --single-bundle true"
If required, Combine scripts.js and main.js in the created dist folder by creating a js file "concat_ngx.js":
const fs = require('fs-extra');
const concat = require('concat');
(async function build() {
const files = [
'./dist/<your_project>/scripts.js',
'./dist/<your_project>/main.js',
]
await fs.ensureDir('elements_ngx')
await concat(files, 'elements_ngx/combined-script.js');
})()
Run file to get single js file:
node concat_ngx.js
Use js file in any Angular/Other project to use the custom component created.
But the problem here is I have to change the component bootstrap every time in app-module.ts
I needed an automated way to change the bootstrapping in app-module.ts at runtime.
But the problem here is I have to change the component bootstrap every time in app-module.ts
I needed an automated way to change the bootstrapping in app-module.ts at runtime.
In Angular 7, Add Default or Automatic bootstrapping :-
It is the default way an angular application bootstraps and main.ts holds the starting point of an application.
platformBrowserDynamic().bootstrapModule(AppModule);
For more information see here: -https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604
ng serve -o app-one
or
ng serve -o app-two
For more information see here https://medium.com/#klauskpm/change-the-default-angular-project-27da8fca8721
I need set app versio like 1.006
I use ember-electron
Here:
enter image description here
I generally follow semvar versioning in my ember electron applications and use the package.json version as my app version. You can maintain your version number in one place (package.json) and use it wherever needed in your app.
To access the version in package.json, add the following code to your config/enviroment.js file:
/* eslint-env node */
'use strict';
const pjson = require('../package.json');
module.exports = function (environment) {
// ENV variables, etc ...
APP: {
appVersion: pjson.version,
appAuthor: pjson.author
},
// remainder of environment.js ...
return ENV;
};
Using app/controllers/application.js:
import Controller from '#ember/controller';
import config from '../config/environment';
export default Controller.extend({
appVer: config.APP.appVersion
});
your can then use {{appVer}} wherever you want to display your version number.
Question
What do I need to do to get my Angular application to allow me to use the templateUrl property of the Component decorator? When you create a new Rails 5.1 application and use the flag --webpack=angular, it gives you a proof of concept Angular application, but as soon as I started creating more components, I began to recognize that I don't know how to refer to the correct path that the templates are being served. I'm not even sure if they are being served, to be honest.
What I've tried
Tried many different variations of the path, from just the file name all the way to the root of the application, one folder at a time.
Googling for someone else running into the same problem.
include the CommonModule in my imports in app.module.ts.
Background
I'm really used to using the Angular CLI and I don't remember ever having an issue using the templateUrl property. What is different about an Angular CLI project to what's given to you in a Rails 5.1 app in terms of configuration affecting templates? Would I be able to use Angular CLI in a Rails 5.1 app without having to change much of the Rails app itself?
Can be done. But this needs a different webpack loader setup and several minor tweaks.
But first: shopping!
$ yarn add \
html-loader \
awesome-typescript-loader \
angular2-template-loader \
#types/node \
--dev
With all required packages installed replace config/webpack/loaders/angular.js with this:
const {env} = require('../configuration.js');
isProd = env.NODE_ENV === 'production';
module.exports = {
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { useCache: !isProd }
},
'angular2-template-loader'
]
};
angular2-template-loader scans your Component decorators for the templateUrl argument and replaces it with something like template: require('...')'. The require() call is the reason for installing #types/node by the way.
awesome-typescript-loader is a bit more optimized than the default ts-loader (which will probably work here as well, but I didn't test it).
So far so good. Next we need to tell webpack how to actually load HTML files. Add config/webpack/loaders/html.js with the following content:
module.exports = {
test: /\.html$/,
loader: 'html-loader',
};
Nothing obscure here. Moving on.
In your Javascript app add type informations for *.html files to app/javascript/hello_angular/html.d.ts:
declare module "*.html" {
const content: string
export default content
}
This tells the TypeScript compiler that require('template.html') returns a string.
Last but not least you have add .html to the recognized extensions in config/webpacker.yml:
default: &default
# ...
extensions:
# ...
- .html
# ...
Now you should be good to go:
import { Component } from '#angular/core';
#Component({
selector: 'hello-angular',
templateUrl: './template.html'
})
export class AppComponent {
name = 'Angular!';
}
Don't forget to restart bin/webpack-dev-server.
Theoretically you could do the same for styleUrls. But this is more tangled with rails/webpacker and you would loose some of it's features.
I have an aurelia application running in electron. My source files are typescript and I have ambient typings for electron and node.
Because I know I'm compiling for use on electron, I am transpiling my typescript to es6 and with System module loading; this means I can turn system.js's transpiler off. I'm using system.js and jspm because that is approach Aurelia has been pushing.
So in my ts files: I would like to be able to do:
import {remote} from 'electron';
Unfortunately, system.js does not know anything about the module electron and fails during runtime. TypeScript on the other hand is perfectly happy because I've set up the typings for electron and node; I get full intellisense in VSCode too.
note: if you attempt to do var electron = require('electron'); in the header, system.js interferes with it and it fails to load. You can place that 'require('electron')' within a class or function and it will work, but I don't find this ideal.
Question: How can I get system.js to correctly return the 'electron' module that is only available when you run the app in electron itself?
A solution --hopefully there is a better way-- I've come up with is to shim the electron module for system.js and link it directly to the contents of require('electron'):
electron.js
System.register([], function (exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var electron;
return {
setters: [],
execute: function () {
electron = require('electron');
exports_1("default", electron);
Object.keys(electron).forEach(function (key) {
exports_1(key, electron[key]);
});
}
}
});
this effectively wraps the internal electron module and allows system.js to know about it. It works; but hopefully there is a more elegant/built-in way that others know of.
You don't need any mappings or changes to the typescypt as import {remote} from 'electron' will attempt to resolve electron.js as a last resort.
Barback package description:
An asset build system. Given a set of input files and a set of
transformations (think compilers, preprocessors and the like), will
automatically apply the appropriate transforms and generate output
files. When inputs are modified, automatically runs the transforms
that are affected. Runs transforms asynchronously and in parallel when
possible to maximize responsiveness.
Docs on assets and transformers say:
For pub serve, the transformers run when the dev server starts up and
whenever a source asset changes. The pub build command runs the
transformers once and then exits.
So I took this example:
// Copyright (c) 2014, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'package:barback/barback.dart';
import 'package:markdown/markdown.dart';
import 'dart:async';
class ConvertMarkdown extends Transformer {
// A constructor named "asPlugin" is required. It can be empty, but
// it must be present. It is how pub determines that you want this
// class to be publicly available as a loadable transformer plugin.
ConvertMarkdown.asPlugin();
// Any markdown file with one of the following extensions is
// converted to HTML.
String get allowedExtensions => ".md .markdown .mdown";
Future apply(Transform transform) {
return transform.primaryInput.readAsString().then((content) {
// The extension of the output is changed to ".html".
var id = transform.primaryInput.id.changeExtension(".html");
String newContent = "<html><body>"
+ markdownToHtml(content)
+ "</body></html>";
transform.addOutput(new Asset.fromString(id, newContent));
});
}
}
It runs as expected with pub build, but does nothing with pub serve except printing:
Build completed successfully
every time I change any file (not only appropriate asset) in the directory.
After reading this I think that Dart has some problems with watching files(not only directories) on Windows platform.
It is true that pub serve runs transformers after each file modification. But compared to pub build it is not outputting the results to the build/ folder. pub serve is a development server, so you need to request you assets via HTTP, for example in a browser.
See the pub serve documentation for more details