New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: webpack support #11346
feat: webpack support #11346
Conversation
New dependencies added: ansi-escapesAuthor: Sindre Sorhus Description: ANSI escape codes for manipulating the terminal Homepage: https://github.com/sindresorhus/ansi-escapes#readme
|
Created | over 4 years ago |
Last Updated | 8 months ago |
License | MIT |
Maintainers | 1 |
Releases | 25 |
Direct Dependencies | ansi-align , camelcase , chalk , cli-boxes , string-width , term-size , type-fest and widest-line |
Keywords | cli, box, boxes, terminal, term, console, ascii, unicode, border and text |
README
boxen
Create boxes in the terminal
Install
$ npm install boxen
Usage
const boxen = require('boxen');
console.log(boxen('unicorn', {padding: 1}));
/*
┌─────────────┐
│ │
│ unicorn │
│ │
└─────────────┘
*/
console.log(boxen('unicorn', {padding: 1, margin: 1, borderStyle: 'double'}));
/*
╔═════════════╗
║ ║
║ unicorn ║
║ ║
╚═════════════╝
*/
API
boxen(text, options?)
text
Type: string
Text inside the box.
options
Type: object
borderColor
Type: string
Values: 'black'
'red'
'green'
'yellow'
'blue'
'magenta'
'cyan'
'white'
'gray'
or a hex value like '#ff0000'
Color of the box border.
borderStyle
Type: string | object
Default: 'single'
Values:
'single'
┌───┐
│foo│
└───┘
'double'
╔═══╗
║foo║
╚═══╝
'round'
('single'
sides with round corners)
╭───╮
│foo│
╰───╯
'bold'
┏━━━┓
┃foo┃
┗━━━┛
'singleDouble'
('single'
on top and bottom,'double'
on right and left)
╓───╖
║foo║
╙───╜
'doubleSingle'
('double'
on top and bottom,'single'
on right and left)
╒═══╕
│foo│
╘═══╛
'classic'
+---+
|foo|
+---+
Style of the box border.
Can be any of the above predefined styles or an object with the following keys:
{
topLeft: '+',
topRight: '+',
bottomLeft: '+',
bottomRight: '+',
horizontal: '-',
vertical: '|'
}
dimBorder
Type: boolean
Default: false
Reduce opacity of the border.
padding
Type: number | object
Default: 0
Space between the text and box border.
Accepts a number or an object with any of the top
, right
, bottom
, left
properties. When a number is specified, the left/right padding is 3 times the top/bottom to make it look nice.
margin
Type: number | object
Default: 0
Space around the box.
Accepts a number or an object with any of the top
, right
, bottom
, left
properties. When a number is specified, the left/right margin is 3 times the top/bottom to make it look nice.
float
Type: string
Default: 'left'
Values: 'right'
'center'
'left'
Float the box on the available terminal screen space.
backgroundColor
Type: string
Values: 'black'
'red'
'green'
'yellow'
'blue'
'magenta'
'cyan'
'white'
'gray'
or a hex value like '#ff0000'
Color of the background.
align
Type: string
Default: 'left'
Values: 'left'
'center'
'right'
Align the text in the box based on the widest line.
Related
- boxen-cli - CLI for this module
- cli-boxes - Boxes for use in the terminal
- ink-box - Box component for Ink that uses this package
Tidelift helps make open source sustainable for maintainers while giving companies
assurances about security, maintenance, and licensing for their dependencies.
wrap-ansi
Author: Sindre Sorhus
Description: Wordwrap a string with ANSI escape codes
Homepage: https://github.com/chalk/wrap-ansi#readme
Created | almost 5 years ago |
Last Updated | 4 months ago |
License | MIT |
Maintainers | 3 |
Releases | 16 |
Direct Dependencies | ansi-styles , string-width and strip-ansi |
Keywords | wrap, break, wordwrap, wordbreak, linewrap, ansi, styles, color, colour, colors, terminal, console, cli, string, tty, escape, formatting, rgb, 256, shell, xterm, log, logging, command-line and text |
README
wrap-ansi
Wordwrap a string with ANSI escape codes
Install
$ npm install wrap-ansi
Usage
const chalk = require('chalk');
const wrapAnsi = require('wrap-ansi');
const input = 'The quick brown ' + chalk.red('fox jumped over ') +
'the lazy ' + chalk.green('dog and then ran away with the unicorn.');
console.log(wrapAnsi(input, 20));
API
wrapAnsi(string, columns, options?)
Wrap words to the specified column width.
string
Type: string
String with ANSI escape codes. Like one styled by chalk
. Newline characters will be normalized to \n
.
columns
Type: number
Number of columns to wrap the text to.
options
Type: object
hard
Type: boolean
Default: false
By default the wrap is soft, meaning long words may extend past the column width. Setting this to true
will make it hard wrap at the column width.
wordWrap
Type: boolean
Default: true
By default, an attempt is made to split words at spaces, ensuring that they don't extend past the configured columns. If wordWrap is false
, each column will instead be completely filled splitting words as necessary.
trim
Type: boolean
Default: true
Whitespace on all lines is removed by default. Set this option to false
if you don't want to trim.
Related
- slice-ansi - Slice a string with ANSI escape codes
- cli-truncate - Truncate a string to a specific width in the terminal
- chalk - Terminal string styling done right
- jsesc - Generate ASCII-only output from Unicode strings. Useful for creating test fixtures.
Maintainers
Tidelift helps make open source sustainable for maintainers while giving companies
assurances about security, maintenance, and licensing for their dependencies.
ensureAppcdVersion(appcdRootPath, MIN_APPCD_VERSION, true); | ||
} else { | ||
// plain ti-cli, load daemon from global modules | ||
const globalModulesPath = execSync('npm root -g').toString().replace(/\s+$/, ''); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this seems potentially problematic on windows...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
execSync
starts a new shell on windows and directly passes the command to that shell, so this shouldn't be an issue. I tested this on my Window 10 machine and works, but i'll ask QE to double check.
cli/lib/webpack/service.js
Outdated
startWebpack(options) { | ||
this.logger.debug(`Starting Webpack with options: ${JSON.stringify(options)}`); | ||
this.webpackStatus = { state: 'building' }; | ||
return new Promise((resolve, reject) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
really not a fan of all this hand-rolling of Promises, but I'm not sure there's a nice way to move to async
/await
with events like this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, me neither, but i don't think there is a nice way around this since appcd-client
is event based.
cc @cb1kenobi What do you think about having an alternative promise based API for simple requests like these? Always having to write request like the following can get quite repetitive.
client
.request({
path: '/appcd/status'
})
.once('response', onResponse)
.once('error', onError);
I could imagine a promise based API with get(path): Promise
and post(path, data): Promise
, for example.
}); | ||
Promise.resolve().then(async () => { | ||
await webpackService.build(); | ||
return callback(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
⚠️ cli/hooks/webpack.js line 97 – Avoid calling back inside of a promise. (promise/no-callback-in-promise)
logger.error(e.stack); | ||
} | ||
|
||
callback(e); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
⚠️ cli/hooks/webpack.js line 115 – Avoid calling back inside of a promise. (promise/no-callback-in-promise)
c01a53e
to
d0c6baf
Compare
JIRA: https://jira.appcelerator.org/browse/TIMOB-27429
This adds a new CLI hook that will allow the use of Webpack with Titanium.
Motivation
The current JavaScript processing pipeline in Titanium is mainly done in node-titanium-sdk. Although we improved the implementation a lot in the last couple major releases, it still lacks the ability to be customized by users. The only configuration that can be done is to include additional Babel plugins.
With our continuing effort to improve compatibility with Node.js core modules the use of third-party Node modules should also be simplified. Depending on the project type, currently they have to be installed into
Resources/node_modules
(Classic) orapp/lib/node_modules
(Alloy). This is not very intuitive, since users are used to installing Node modules directly into the project root.Last but not least, to support Angular and Vue.js implementations a Webpack build pipeline needs to be in place. The tooling around those is depending on Webpack.
Features
To address the issues outlined above an alternative JavaScript build pipeline using Webpack is now in place. It comes with pre-configured configurations for existing Classic and Alloy projects, as well as for the upcoming Vue.js and Angular implementations (experimental). Webpack support is implemented as a plugin for the Appc Daemon.
Features for the initial release:
Migration
There is a detailed migration guide for existing projects. It describes all steps required to enable Webpack in existing projects and what changes are required for the project. Changes to the code base should be minimal and only affect
require
/import
statements in most cases.How it works
The hook communicates with the Appc Daemon to start new Weback builds and query the current status of running builds. The majority of the work is then done by the daemon in the background. appcd-plugin-webpack will automatically configure Webpack based on the project type so users don't have to deal with Webpack configuration files.
Webpack uses
Resources
as its output directory so our build can continue as usual once Webpack is done. This ensures minimal changes to the existing build pipeline.To get the most out of the "always running" approach of the daemon, once Webpack is started it keeps running for as long as you actively work on a project. After 10min of no activity it stops to save system resources. On the the next build it will automatically be started again. It is also possible to start and stop the Webpack build via the Web UI.
The Webpack plugin will make sure to restart the build when necessary, for example when
tiapp.xml
orbabel.config.js
--force
flag is explicitly setAs a result, there are two kinds of clean builds when Webpack is enabled. The first one when Webpack is not started, which is basically the same as usual. Everything starts from scratch, including JS processing through Webpack. And all builds from then on will just query the daemon for the current Webpack build status. If everything is up-to-date the whole JS handling in our build will be skipped. This means that even subsequent clean builds are faster.
Benchmarks
I currently only have benchmarks for Alloy apps since i don't have a decently large Classic project to test with. Anyway, let's talk some numbers. You will notice that there are two passes for clean builds. The first one is with Webpack not running, the second one with Webpack already running. All times are the average of three builds.
Timings with our very own KitchenSink v2:
#1
#2
The first clean build where Webpack is not already running takes a little longer since there is the overhead of starting Webpack, which can take a couple of seconds.
Now, the bigger the app gets, the better the build time improvements become. The following benchmarks were done with a large real-world project that contains ~100 controllers/views, ~20 widgets and NPM dependencies.
#1
#2
Action items
The hooks tries to locate the appcd daemon either globally when run viati build
or the shipped version included in appc-cli when run withappc run
. Depending on whether the appc-cli daemon can be updated to v3.1.0 or not this behavior needs to be adjusted.appc-cli@8.0.0
ships withappcd@3.1.0
!node-titanium-sdk
once feat: add webpack section node-titanium-sdk#128 is merged.Testing Instructions
I've created a new branch of our Kitchensink App which can be used for easy testing: https://github.com/janvennemann/kitchensink-v2/tree/webpack
To enable Webpack in any other project follow the migration guide.
Kown issues