DEV Community: riversun

Introducing LoadTime: Bringing Clarity to HuggingFace Model Loading Times

riversun — Fri, 02 Jun 2023 00:31:50 +0000

Are you tired of the uncertainty of how long it takes to load large-scale pre-trained language models, such as those from HuggingFace, into GPU or CPU memory? Do you find yourself gazing blankly at a static screen, not knowing when the loading will finally conclude? Let me present you with the solution - LoadTime.

LoadTime is a library that I've developed to tackle this very problem. It provides a progress bar during the memory loading process, bringing an end to your uncertainty. Now, let's dive a little deeper into how it works and what it has to offer.

While HuggingFace's models do provide progress indications during the download phase, they leave you in the dark during memory loading. This is where LoadTime comes into play. The mechanism is simple yet effective: During the initial load, LoadTime caches the total loading time. When the same model is loaded subsequently, LoadTime uses this cached time as a reference to display a progress bar.

Unlike other progress display libraries like tqdm , which require a known total count beforehand, LoadTime is designed for situations where the total is unknown. It provides real-time updates based on past data, making it a versatile tool for your tasks.

Example

pip install loadtime

Here is a simple example of how to use the LoadTime package:

In order to use it, you simply need to wrap the model loading part with LoadTime. It's as easy as that!

import torch
from transformers import AutoTokenizer, AutoModelForCausalLM
from loadtime import LoadTime

model_path = "togethercomputer/RedPajama-INCITE-Chat-3B-v1"


# model = AutoModelForCausalLM.from_pretrained(model_path, torch_dtype=torch.float16)


model = LoadTime(name=model_path,
                 fn=lambda: AutoModelForCausalLM.from_pretrained(model_path, torch_dtype=torch.float16))()


tokenizer = AutoTokenizer.from_pretrained(model_path) # important. load tokenizer after model.

Thanks.

How to convert ChatRWKV to Web API and talk to it from Web chat UIChat UI

riversun — Thu, 30 Mar 2023 08:13:54 +0000

Summary

(This article has been translated from Japanese)

Chat UI displayed in a web browser allows you to talk to ChatRWKV.

ChatRWKV is an open source program that aims to work similar to OpenAI's ChatGPT and works quite comfortably on a local PC.

I made it into a chat engine and used the chat UI library chatux to call it, and here are its contents.

↓Now you can chat with ChatRWKV like this!

The full source code is here
https://github.com/riversun/chatux-server-rwkv

Target

The code in this article assumes a GPU (CUDA) environment.
- As described later, if you use smaller trained data, it works well on older GPUs.
  - For example, using [rwkv-4-pile-3b]

(https://huggingface.co/BlinkDL/rwkv-4-pile-3b) as trained data with fp16i8 worked on GeForce RTX 2060 (6GB memory).

Environment

We tested the following environment

Python: 3.9
GPU CUDA Version: 12
GPU memory: 24GB
OS: Ubuntu Desktop 22.04 / Windows 11

Main part

STEP0: Operation to serverize ChatRWKV

Since chatux will be used as a front-end chat UI, we want to serverize ChatRWKV.
We want to make it as easy as possible, so modify chat.py under the v2 directory of the ChatRWKV repository below to make it a server.

https://github.com/BlinkDL/ChatRWKV/blob/main/v2/chat.py

STEP1: Install related packages

Install related packages (*)

pip install rwkv fastapi uvicorn

(This assumes that you already have pytorch for CUDA running. If you get runtime errors, install the missing packages as needed)

STEP2: Edit chat.py to make it a chat server

Let's modify the previous chat.py into a server

There are 2 points in making a chat server

1. Convert to Web API

Use a package called fastapi to turn it into a Web API server
Use a package called uvicorn to start a web api server made with fastapi
- Accept input with path chat_api with

@app.get("/chat_api") annotation
- Next, throw the input text from the user to the rnn model of ChatRWKV with reply = handle_message(text).replace('\n', '<br>') as follows
- Return the results from the rnn model packed in outJson. only this :)

@app.get("/chat_api")
async def chat(text: str = ""):
    reply = handle_message(text).replace('\n', '<br>')
    print(f'input:{text} reply:{reply}')

    outJson = {
        "output": [
            {
                "type": "text",
                "value": reply
            }
        ]
    }
    return outJson;


app.mount("/", StaticFiles(directory="html", html=True), name="html")

2. Handling of rnn model generation results

The command line version of chat used to output chat response generation results to the console one by one, but in the case of the web chat version (the current chatux archipelago) it does not support sequential output, so sentence generation by the model ended for the time being. Made it possible to respond in stages
- Return send_msg = pipeline.decode(model_tokens[begin:]).strip() part as response
- It is better to return the reply from the rnn model one by one because it is easier to read the results, so the architecture that can realize this is a homework on the chatux side

3. + command processing

I tried to pass +gen, +i, +qa, etc., but the response from the model is returned unprocessed, so if you use these commands, it will be strange It may become. Also, free generation is long, so you may have to wait.

Below is the full source code of the chat server

########################################################################################################
# This program is base on The RWKV Language Model - https://github.com/BlinkDL/RWKV-LM
#
# The original file of this source code can be found here.
# https://github.com/BlinkDL/ChatRWKV/blob/main/v2/chat.py
#
# Based on source code above, I have added the following functionality required for a Web API server for chatbots
# - web server functionality
# - Use queries received in get requests as input to rnn, and http responses to the results generated by rnn
#
########################################################################################################

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

import uvicorn

import os, copy, types, gc, sys

current_path = os.path.dirname(os.path.abspath(__file__))

import numpy as np

args = types.SimpleNamespace()

# specify chat server
HOST = 'localhost'
PORT = 8001
URL = f'http://{HOST}:{PORT}'

# specify RWKV strategy,model(weight data)
STRATEGY = 'cuda fp16i8'
MODEL_NAME = 'RWKV-4-Pile-14B-20230313-ctx8192-test1050.pth'

# specify params for weight data
args.n_layer = 32
args.n_embd = 4096
args.ctx_len = 4096

CHAT_LANG = "English"
PROMPT_FILE = f'{current_path}/init_prompt/English-1.py'

try:
    os.environ["CUDA_VISIBLE_DEVICES"] = sys.argv[1]
except:
    pass
np.set_printoptions(precision=4, suppress=True, linewidth=200)

print('\n\nChatRWKV v2 https://github.com/BlinkDL/ChatRWKV')

import torch

torch.backends.cudnn.benchmark = True
torch.backends.cudnn.allow_tf32 = True
torch.backends.cuda.matmul.allow_tf32 = True

args.strategy = STRATEGY

os.environ["RWKV_JIT_ON"] = '1'  # '1' or '0', please use torch 1.13+ and benchmark speed
os.environ["RWKV_CUDA_ON"] = '0'  # '1' to compile CUDA kernel (10x faster), requires c++ compiler & cuda libraries
args.MODEL_NAME = f'{current_path}/data/{MODEL_NAME}'

CHAT_LEN_SHORT = 40
CHAT_LEN_LONG = 150
FREE_GEN_LEN = 200

GEN_TEMP = 1.0  # sometimes it's a good idea to increase temp. try it
GEN_TOP_P = 0.8
GEN_alpha_presence = 0.2  # Presence Penalty
GEN_alpha_frequency = 0.2  # Frequency Penalty
AVOID_REPEAT = '，：？！'

CHUNK_LEN = 256  # split input into chunks to save VRAM (shorter -> slower) 入力を分割する

PILE_v2_MODEL = False  # ONLY FOR MY OWN TESTING. STILL TRAINING PILE_v2_MODELs

all_state = {}

print(f'\n{CHAT_LANG} - {args.strategy} - {PROMPT_FILE}')
from rwkv.model import RWKV
from rwkv.utils import PIPELINE

with open(PROMPT_FILE, 'rb') as file:
    user = None
    bot = None
    interface = None
    init_prompt = None
    exec(compile(file.read(), PROMPT_FILE, 'exec'))
init_prompt = init_prompt.strip().split('\n')
for c in range(len(init_prompt)):
    init_prompt[c] = init_prompt[c].strip().strip('\u3000').strip('\r')
init_prompt = '\n' + ('\n'.join(init_prompt)).strip() + '\n\n'

print(f'Loading model - {args.MODEL_NAME}')

model = RWKV(model=args.MODEL_NAME, strategy=args.strategy)

if not PILE_v2_MODEL:
    pipeline = PIPELINE(model, f"{current_path}/20B_tokenizer.json")
    END_OF_TEXT = 0
    END_OF_LINE = 187
else:
    pipeline = PIPELINE(model, "cl100k_base")
    END_OF_TEXT = 100257
    END_OF_LINE = 198

model_tokens = []
model_state = None

AVOID_REPEAT_TOKENS = []
for i in AVOID_REPEAT:
    dd = pipeline.encode(i)
    assert len(dd) == 1
    AVOID_REPEAT_TOKENS += dd


def run_rnn(tokens, newline_adj=0):
    global model_tokens, model_state

    tokens = [int(x) for x in tokens]

    model_tokens += tokens

    while len(tokens) > 0:
        out, model_state = model.forward(tokens[:CHUNK_LEN], model_state)
        tokens = tokens[CHUNK_LEN:]

    out[END_OF_LINE] += newline_adj
    if model_tokens[-1] in AVOID_REPEAT_TOKENS:
        out[model_tokens[-1]] = -999999999
    return out


def save_all_stat(srv, name, last_out):
    n = f'{name}_{srv}'
    all_state[n] = {}
    all_state[n]['out'] = last_out
    all_state[n]['rnn'] = copy.deepcopy(model_state)
    all_state[n]['token'] = copy.deepcopy(model_tokens)


def load_all_stat(srv, name):
    global model_tokens, model_state
    n = f'{name}_{srv}'
    model_state = copy.deepcopy(all_state[n]['rnn'])
    model_tokens = copy.deepcopy(all_state[n]['token'])
    return all_state[n]['out']


out = run_rnn(pipeline.encode(init_prompt))
save_all_stat('', 'chat_init', out)
gc.collect()
torch.cuda.empty_cache()

srv_list = ['dummy_server']

for s in srv_list:
    save_all_stat(s, 'chat', out)


def reply_msg(msg):
    print(f"bot's response' {bot}{interface} {msg}\n")


def handle_message(message):
    global model_tokens, model_state

    srv = 'dummy_server'

    msg = message.replace('\\n', '\n').strip()

    x_temp = GEN_TEMP
    x_top_p = GEN_TOP_P
    if ("-temp=" in msg):
        x_temp = float(msg.split("-temp=")[1].split(" ")[0])
        msg = msg.replace("-temp=" + f'{x_temp:g}', "")
    if ("-top_p=" in msg):
        x_top_p = float(msg.split("-top_p=")[1].split(" ")[0])
        msg = msg.replace("-top_p=" + f'{x_top_p:g}', "")
        # print(f"top_p: {x_top_p}")
    if x_temp <= 0.2:
        x_temp = 0.2
    if x_temp >= 5:
        x_temp = 5
    if x_top_p <= 0:
        x_top_p = 0

    if msg == '+reset':
        out = load_all_stat('', 'chat_init')
        save_all_stat(srv, 'chat', out)
        reply_msg("Chat reset.")
        return "Chat Reset"

    elif msg[:5].lower() == '+gen ' or msg[:3].lower() == '+i ' or msg[:4].lower() == '+qa ' \
            or msg[:4].lower() == '+qq ' or msg.lower() == '+++' or msg.lower() == '++':

        if msg[:5].lower() == '+gen ':
            new = '\n' + msg[5:].strip()
            model_state = None
            model_tokens = []
            out = run_rnn(pipeline.encode(new))
            save_all_stat(srv, 'gen_0', out)

        elif msg[:3].lower() == '+i ':
            new = f'''
Below is an instruction that describes a task. Write a response that appropriately completes the request.

# Instruction:
{msg[3:].strip()}

# Response:
'''
            model_state = None
            model_tokens = []
            out = run_rnn(pipeline.encode(new))
            save_all_stat(srv, 'gen_0', out)

        elif msg[:4].lower() == '+qq ':
            new = '\nQ: ' + msg[4:].strip() + '\nA:'
            model_state = None
            model_tokens = []
            out = run_rnn(pipeline.encode(new))
            save_all_stat(srv, 'gen_0', out)

        elif msg[:4].lower() == '+qa ':
            out = load_all_stat('', 'chat_init')

            real_msg = msg[4:].strip()
            new = f"{user}{interface} {real_msg}\n\n{bot}{interface}"

            out = run_rnn(pipeline.encode(new))
            save_all_stat(srv, 'gen_0', out)

        elif msg.lower() == '+++':
            try:
                out = load_all_stat(srv, 'gen_1')
                save_all_stat(srv, 'gen_0', out)
            except:
                return

        elif msg.lower() == '++':
            try:
                out = load_all_stat(srv, 'gen_0')
            except:
                return

        begin = len(model_tokens)
        out_last = begin
        occurrence = {}
        for i in range(FREE_GEN_LEN + 100):
            for n in occurrence:
                out[n] -= (GEN_alpha_presence + occurrence[n] * GEN_alpha_frequency)
            token = pipeline.sample_logits(
                out,
                temperature=x_temp,
                top_p=x_top_p,
            )
            if token == END_OF_TEXT:
                break
            if token not in occurrence:
                occurrence[token] = 1
            else:
                occurrence[token] += 1

            if msg[:4].lower() == '+qa ':  # or msg[:4].lower() == '+qq ':
                out = run_rnn([token], newline_adj=-2)
            else:
                out = run_rnn([token])

            xxx = pipeline.decode(model_tokens[out_last:])
            if '\ufffd' not in xxx:  # avoid utf-8 display issues
                print(xxx, end='', flush=True)
                out_last = begin + i + 1
                if i >= FREE_GEN_LEN:
                    break
        print('\n')
        send_msg = pipeline.decode(model_tokens[begin:]).strip()
        # print(f'### send ###\n[{send_msg}]')
        save_all_stat(srv, 'gen_1', out)
        return send_msg

    else:
        if msg.lower() == '+':
            try:
                out = load_all_stat(srv, 'chat_pre')
            except:
                return
        else:
            out = load_all_stat(srv, 'chat')
            new = f"{user}{interface} {msg}\n\n{bot}{interface}"
            # print(f'### add ###\n[{new}]')
            out = run_rnn(pipeline.encode(new), newline_adj=-999999999)
            save_all_stat(srv, 'chat_pre', out)

        begin = len(model_tokens)
        out_last = begin

        occurrence = {}
        for i in range(999):
            if i <= 0:
                newline_adj = -999999999
            elif i <= CHAT_LEN_SHORT:
                newline_adj = (i - CHAT_LEN_SHORT) / 10
            elif i <= CHAT_LEN_LONG:
                newline_adj = 0
            else:
                newline_adj = min(2, (i - CHAT_LEN_LONG) * 0.25)  # MUST END THE GENERATION

            for n in occurrence:
                out[n] -= (GEN_alpha_presence + occurrence[n] * GEN_alpha_frequency)
            token = pipeline.sample_logits(
                out,
                temperature=x_temp,
                top_p=x_top_p,
            )
            # if token == END_OF_TEXT:
            #     break
            if token not in occurrence:
                occurrence[token] = 1
            else:
                occurrence[token] += 1

            out = run_rnn([token], newline_adj=newline_adj)
            out[END_OF_TEXT] = -999999999  # disable <|endoftext|>

            xxx = pipeline.decode(model_tokens[out_last:])
            if '\ufffd' not in xxx:  # avoid utf-8 display issues
                out_last = begin + i + 1

            send_msg = pipeline.decode(model_tokens[begin:])
            if '\n\n' in send_msg:
                send_msg = send_msg.strip()
                # print(f'send_msg={send_msg}')
                break

        save_all_stat(srv, 'chat', out)
        return send_msg;


app = FastAPI()


@app.get("/chat_api")
async def chat(text: str = ""):
    reply = handle_message(text).replace('\n', '<br>')
    print(f'input:{text} reply:{reply}')

    outJson = {
        "output": [
            {
                "type": "text",
                "value": reply
            }
        ]
    }
    return outJson;


app.mount("/", StaticFiles(directory="html", html=True), name="html")


def start_server():
    uvicorn.run(app, host=HOST, port=PORT)


def main():
    start_server()


if __name__ == "__main__":
    main()

STEP3: Obtain trained model data (weights)

The code is completed, but we do not yet have the trained weights, so we download them from the ChatRWKV author's page on Hugging Face.

There are several types of model data: 3b, 7b, 14b, etc. The higher the number, the more parameters you have, the more expressive your model is.

However, the higher the number of parameters, the more GPU memory is consumed, so download the data according to the execution environment.

Below is a table of typical model data types and GPU memory consumption

strategy	rwkv-4-pile-14b	rwkv-4-pile-7b	rwkv-4-pile-3b
fp16	28GB	16GB	6GB
fp16i8	14GB	8.6GB	3GB

By the way, if you use fp16i8 (which seems to mean quantize fp16 trained data to int8), you can reduce the amount of GPU memory used, although the accuracy may be slightly lower.

(When specifying it in the code, use cuda fp16 or cuda fp16i8.

Download the weight data (*.pth) file from

Get BlinkDL/rwkv-4-pile-14b.

BlinkDL/rwkv-4-pile-14b

Download
- https://huggingface.co/BlinkDL/rwkv-4-pile-14b
- The file RWKV-4-Pile-14B-2023xxxx-ctx8192-testxxx.pth is The best general model
GPU memory consumption
- About 28GB (fp16) ... Out of memory even on a 24GB class GPU
- About 14GB(fp16i8) ... Accuracy is said to be a little degraded, but it works on T4.
Parameters

Parameters

args.n_layer = 40
args.n_embd = 5120
args.ctx_len = 8192

Get BlinkDL/rwkv-4-pile-7b

BlinkDL/rwkv-4-pile-7b

Download.
-https://huggingface.co/BlinkDL/rwkv-4-pile-7b
- RWKV-4-Pile-7B-20230109-ctx4096.pth
Consumed GPU memory
- Approx. 16GB (fp16)
- Approx. 8.6GB (fp16i8)
Parameters

args.n_layer = 32
args.n_embd = 4096
args.ctx_len = 4096

Get BlinkDL/rwkv-4-pile-3b

BlinkDL/rwkv-4-pile-3b

Download.
-https://huggingface.co/BlinkDL/rwkv-4-pile-3b
- RWKV-4-Pile-3B-20221110-ctx4096.pth
GPU memory consumption
- Approx. 6GB(fp16)
- Approx. 3GB (fp16i8)
Parameters

args.n_layer = 32
args.n_embd = 2560
args.ctx_len = 4096

Place the downloaded files in the [project]/data folder

If this doesn't ring a bell, refer to the folder structure at the bottom of this page.
https://github.com/riversun/chatux-server-rwkv

STEP4: Set the learned model data (weights) in the code

Open the chatux-server-rwkv.py file you just created.

In the #specify RWKV strategy,model(weight data) area, enter STRATEGY= and MODEL_NAME as shown below. The MODEL_NAME is just the file name.
Around # specify params for weight data, enter the parameters for the trained model data. ↑(You can copy and paste the ones shown in the above.

# specify RWKV strategy,model(weight data)
STRATEGY = 'cuda fp16i8'
MODEL_NAME = 'RWKV-4-Pile-7B-20230109-ctx4096.pth'

# specify params for weight data
args.n_layer = 32
args.n_embd = 4096
args.ctx_len = 4096

STEP5: Place other files

5-1 Create ChatUI (HTML)

Prepare index.html as follows and save it as [project]/html/index.html.

chatux loads chatux.min.js.

Now you will see the chat UI in a small window on the right edge for PCs, or on the full screen for smartphones, and you can chat.

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>chatRWKV </title>
</head>
<body>
<script src="https://riversun.github.io/chatux/chatux.min.js"></script>
<script>
    const chatux = new ChatUx();

    // initializing param for chatux
 const initParam =
        {
            renderMode: 'auto',
            api: {
                //echo chat server
                endpoint:'/chat_api',
                method: 'GET',
                dataType: 'json'
            },
            bot: {
                botPhoto: 'https://riversun.github.io/chatbot/bot_icon_operator.png',
                humanPhoto: null,
                widget: {
                    sendLabel: 'SEND',
                    placeHolder: 'Say something'
                }
            },
            window: {
                title: 'chatRWKV',
                infoUrl: 'https://github.com/riversun/chatux'
            }
        };
    chatux.init(initParam);
    chatux.start(true);


</script>
</body>
</html>

The following server information is specified to match the chat server just created

 api: {
                //echo chat server
                endpoint:'/chat_api',
                method: 'GET',
                dataType: 'json'
            },

5-2 Putting the initial prompt

Create a folder [project]/init_prompt and place the initial prompt (the first conversation context prompt) there.

The initial prompt is specified in the source code at PROMPT_FILE = f'{current_path}/init_prompt/English-1.py'.

Here, we put https://github.com/BlinkDL/ChatRWKV/blob/main/v2/prompt/default/English-1.py.

Incidentally, if you want to make it Japanese-inspired, you can put the initial prompt in Japanese.

https://github.com/riversun/chatux-server-rwkv/blob/main/init_prompt/Japanese-2.py

5-3 Putting tokenizer.json

Place https://github.com/BlinkDL/ChatRWKV/blob/main/v2/20B_tokenizer.json as [project]/20B_tokenizer.json.

STEP6: Start the chat server

You can start the chat server with the following command

python chatux-server-rwkv.py

STEP7: Execution

Once the server is started, open http://localhost:8001 in your browser.

Now you can hit ChatRWKV from the web chat UI (ChatUX)!

Demo Video.

https://www.youtube.com/embed/t3vuNmIYXBo

ChatRWKV does a good job.

As you can see in the video below, I asked him the following questions and he responded nicely.

The Tallest Mountain in the World."
Who was the lead actor on Titanic?"
Other films made by the director of Titanic"

Summary

I explained how to make ChatRWKV conversational with Web Chat UI
- FastAPI is used to convert to Web API
- Sequential messages returned by the rnn model are summarized before being responded to.
- ToBe
  - ChatUX should have sequential callbacks like ChatGPT and ChatRWKV
  - Better response for free generation
  - Engine is classified
  - On-memory conversation context (status to be passed to rnn) is persistent
Here is a sample code that has been tested
- https://github.com/riversun/chatux-server-rwkv

Thank you for reading to the end!

Recipes on how to create a library that supports both browser and Node.js

riversun — Sat, 29 Feb 2020 05:21:30 +0000

About

Introduces how to build a library that supports both browser and Node.js using webpack4 and ES6, and how to use the created library.

There are two ways to create a library that supports both browser and node.js.

One bundle:

The first is a method that covers both browser and Node.js with one bundle.
In this article, we'll take a closer look at how to create one bundle for both browser and Node.js.

Two bundles:

The second is to build libraries for browser and node.js separately.

1.One class in the library
1-1.Publish an "export default" class.
1-2.Publish an "export default" class with library name (like namespace).
1-3.Publish an "export default" class with library name without using the default property.
1-4.Publish an "export default" class with the setting "library name = class name".
1-5.Publish an "export default" class in a way called "reexport".
2.Multiple classes in the library
2-1.Publish multiple classes
2-2.Publish multiple classes with library name
2-3.Publish multiple classes including "export default" class
2-4.Publish only "export default" class from multiple classes.
3. Other options
3-1.Set a separate namespace for each module type.
3-2.Set a separate comment for each module type.
3-3.Make library name looks like namespace separated by periods like "org.riversun.GereatFamily".
3-4.Separate external libraries(dependencies) using "externals"
How to run examples

Examples on Github

riversun / making-library-with-webpack

How to build a library that supports both browser and Node.js using webpack4 and ES6

Recipes on how to create a library using webpack

About

Introduces how to build a library that supports both browser and Node.js using webpack4 and ES6, and how to use the created library.

There are two ways to create a library that supports both browser and node.js.

One bundle:
The first is a method that covers both browser and Node.js with one bundle In this article, we'll take a closer look at how to create one bundle for both browser and Node.js.
Two bundles:
The second is to build libraries for browser and node.js separately.

How to run examples

Step 1.Clone this repository.

Step2.Go to example directory like "part_1_1"

cd part_1_1

Step3.Run 'npm start' after npm install to start examples.

npm install
npm start

1.One class in the library

1-1.Publish an "export default" class.

Build configuration

Build configuration is as follows

family.js is the source code of the…

View on GitHub

1.One class in the library

1-1.Publish an "export default" class.

Build configuration

Build configuration is as follows

family.js is the source code of the library to be published

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: '',
    libraryExport: '',
    libraryTarget: 'umd',
    globalObject: 'this',
},

See full source code of webpack.config.js

Source code of the library

family.js has a class named Tom with a single method sayHello.
We will see how to turn this into a library.

family.js

export default class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}

Source code for using this library

●Using from Browser

<script src="./mylib.min.js"></script>
<script>
    const Tom = window.default;
    const tom = new Tom();
    console.log(tom.sayHello());
</script>

Open demo

●Using from Node.js

const Lib = require('./mylib.min.js');
const Tom = Lib.default;
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

Also works with the following code,

const Tom = require('./mylib.min.js').default;
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

●Example of using ES6's import statement

import * as Lib from './mylib.min.js';
const Tom = Lib.default;
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

Also works with the following code,

import {default as Tom} from './mylib.min.js';
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

import Tom from './mylib.min.js';//Pick default
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

●Tips for this recipe

Point 1:What does globalObject: 'this' mean?

The webpacked bundle mylib.min.js is as follows.

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else {
        var a = factory();
        for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
    }
})(this, function() {...});

See full source code of bundle(develop build)

This is an immediate function with (this, function ()) as its argument.
This this is caused by setting globalObject: 'this'.
If you do not specify globalObject:,
the argument of this immediate function will be (window, function ()).
It works on browsers that have a window object,
but cannot be run on node.js that does not have a window object.
As you might expect, if you try the above, you will get ReferenceError: window is not defined.
So if you want to support both browser and node.js,
don't forget to include globalObject: 'this'.

Point 2:Classes you want to publish are stored with the key "default"

If you want to access the classes published in the library,
Use require('./mylib.min.js').default on node.js and use window.default(=window["default"]) on the browser.

Remember that in this configuration, the class is identified by the key default.

1-2.Publish an "export default" class with library name (like namespace).

The library name (namespace) can be set by specifying output.library: 'MyLibrary' in webpack.config.js.

Build Configuration

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: 'MyLibrary',
    libraryExport: '',
    libraryTarget: 'umd',
    globalObject: 'this',
},

See full source code of webpack.config.js

Source code of the library

family.js

export default class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}

Source code for using this library

●Using from Browser

See below.
Tom class can be used as MyLibrary.default.

<script src="./mylib.min.js"></script>
<script>
    const Tom = MyLibrary.default;
    const tom = new Tom();
    console.log(tom.sayHello());
</script>

Open demo

●Using from Node.js

Note that in case of node.js (CommonJS2), library name is ignored .
So output.library: 'MyLibrary' does not work for node.js.

const Lib = require('./mylib.min.js');
const Tom = Lib.default;
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

●Example of using ES6's import statement

import * as Lib from './mylib.min.js';
const Tom = Lib.default;
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

1-3.Publish an "export default" class with library name without using the default property.

You want to access a class without using "default" which looks redundant like below.

const Tom = MyLibrary.default;

Build Configuration

Try to set output.libraryExport: 'default'

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: 'MyLibrary',
    libraryExport: 'default',
    libraryTarget: 'umd',
    globalObject: 'this',
},

See full source code of webpack.config.js

Source code of the library

family.js

export default class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}

Source code for using this library

●Using from Browser

Let's build the library with this configuration.
Then, instead of MyLibrary.default,
MyLibrary itself equals to a reference of Tom class.

<script src="./mylib.min.js"></script>
<script>
    const Tom = MyLibrary;
    const tom = new Tom();
    console.log(tom.sayHello());
</script>

Open demo

●Using from Node.js

As mentioned above, in case of node.js (CommonJS2), library name is ignored .

const Tom = require('./mylib.min.js');
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

●Example of using ES6's import statement

import Tom  from './mylib.min.js';
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

1-4.Publish an "export default" class with the setting "library name = class name".

Build Configuration

Set output.libraryExport: 'default'
Make library name the same as class name like output.library: 'Tom'

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: 'Tom',
    libraryExport: 'default',
    libraryTarget: 'umd',
    globalObject: 'this',
},

See full source code of webpack.config.js

Source code of the library

family.js

export default class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}

Source code for using this library

●Using from Browser

<script src="./mylib.min.js"></script>
<script>
    const tom = new Tom();
    console.log(tom.sayHello());
</script>

Open demo

●Using from Node.js

const Tom = require('./mylib.min.js');
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

●Example of using ES6's import statement

import Tom from './mylib.min.js';
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

●Tips for this recipe

It can be accessed from the browser and node.js with the symbol Tom.
This configuration is one of my favorites.

1-5.Publish an "export default" class in a way called "reexport".

Publish the library using re-export.
Re-export means exporting one module from another.

Build Configuration

Change entry to index.js to re-export from index.js.

webpack.config.js

entry: {
    'mylib': [`./src/index.js`],
},
output: {
    filename: `[name].min.js`,
    library: '',
    libraryExport: '',
    libraryTarget: 'umd',
    globalObject: 'this',
},

See full source code of webpack.config.js

Source code of the library

Now, let's create index.js and re-export the Tom class in family.js from there.

export {default as Tom} from './family.js';

Tom is "export"ed by {default as Tom}
when reexporting by index.js. So, strictly speaking, this method is no longer "default export".

family.js

export default class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}

Source code for using this library

●Using from Browser

<script src="./mylib.min.js"></script>
<script>
    const tom = new Tom();
    console.log(tom.sayHello());
</script>

Open demo

●Using from Node.js

We use destructuring assignment to get the Tom class.

const {Tom} = require('./mylib.min.js');
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

●Example of using ES6's import statement

import {Tom} from './mylib.min.js';
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

2.Multiple classes in the library

2-1.Publish multiple classes

Let's look at some examples of publishing multiple classes.
(You can publish not just classes but functions or variables in the same way.)

Source code of the library

As you can see, the following family.js contains two classes Tom and Jack.

family.js

export class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}
export class Jack {
    sayHello() {
        return 'Hi, I am Jack.'
    }
}

Build Configuration

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: '',
    libraryExport: '',
    libraryTarget: 'umd',
    globalObject: 'this',
},

See full source code of webpack.config.js

Source code for using this library

●Using from Browser

<script src="./mylib.min.js"></script>
<script>
    const tom = new Tom();//means window["Tom"]
    const jack = new Jack();//means window["Jack"]

    console.log(tom.sayHello());//-> Hi, I am Tom.
    console.log(jack.sayHello());//-> Hi, I am Jack.

</script>

Open demo

●Using from Node.js

const {Tom, Jack} = require('./mylib.min.js');

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.

Also works with the following code,

const Lib = require('./mylib.min.js');

const Tom = Lib.Tom;
const Jack = Lib.Jack;

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.

●Example of using ES6's import statement

import * as Lib from './mylib.min.js';

const Tom = Lib.Tom;
const Jack = Lib.Jack;

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.

import {Tom, Jack} from './mylib.min.js';

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.

2-2.Publish multiple classes with library name

By specifying library:'GreatFamily',
you can add a library name (like namespace) like as follows.

Build Configuration

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: 'GreatFamily',
    libraryExport: '',
    libraryTarget: 'umd',
    globalObject: 'this',
},

See full source code of webpack.config.js

Source code of the library

family.js

export class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}
export class Jack {
    sayHello() {
        return 'Hi, I am Jack.'
    }
}

Source code for using this library

●Using from Browser

When running on a browser, each class(Tom and Jack) is stored in window ["GreatFamily"].

<script src="./mylib.min.js"></script>
<script>
    const tom = new GreatFamily.Tom();
    const jack = new GreatFamily.Jack();

    console.log(tom.sayHello());
    console.log(jack.sayHello());

</script>

Open demo

●Using from Node.js

Note that in case of node.js (CommonJS2), library name is ignored .
So output.library: 'GreatFamily' does not work for node.js.

const Lib = require('./mylib.min.js');

const Tom = Lib.Tom;
const Jack = Lib.Jack;

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.

●Example of using ES6's import statement

import * as Lib from './mylib.min.js';

const Tom = Lib.Tom;
const Jack = Lib.Jack;

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.

2-3.Publish multiple classes including "export default" class

Source code of the library

family.js

export default class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}
export class Jack {
    sayHello() {
        return 'Hi, I am Jack.'
    }
}

Build Configuration

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: '',
    libraryExport: '',
    libraryTarget: 'umd',
    globalObject: 'this',
},

See full source code of webpack.config.js

Source code for using this library

●Using from Browser

<script src="./mylib.min.js"></script>
<script>

    const Tom = window.default;//means window["default"]

    const tom = new Tom();
    const jack = new Jack();//means window["Jack"]

    console.log(tom.sayHello());
    console.log(jack.sayHello());

</script>

Open demo

●Using from Node.js

const Lib = require('./mylib.min.js');

const Tom = Lib.default;
const Jack = Lib.Jack;

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.

Also works with the following code,

const Tom = require('./mylib.min.js').default;
const {Jack} = require('./mylib.min.js');

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.

●Example of using ES6's import statement

import * as Lib from './mylib.min.js';

const Tom=Lib.default;
const Jack=Lib.Jack;

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.

import {default as Tom, Jack} from './mylib.min.js';

const tom = new Tom();
const jack = new Jack();

console.log(tom.sayHello());//-> Hi, I am Tom.
console.log(jack.sayHello());//-> Hi, I am Jack.


import Tom2 from './mylib.min.js';
import {Jack as Jack2} from './mylib.min.js';

const tom2 = new Tom2();
const jack2 = new Jack2();

console.log(tom2.sayHello());//-> Hi, I am Tom.
console.log(jack2.sayHello());//-> Hi, I am Jack.

2-4.Publish only "export default" class from multiple classes.

Here's a rare pattern, but let's take a look to get a better understanding of what happens when building.

Build Configuration

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: 'Tom',
    libraryExport: 'default',
    libraryTarget: 'umd',
    globalObject: 'this'
},

See full source code of webpack.config.js

Source code of the library

family.js

export default class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}
export class Jack {
    sayHello() {
        return 'Hi, I am Jack.'
    }
}

Source code for using this library

●Using from Browser

Jack class becomes inaccessible from outside code.

<script src="./mylib.min.js"></script>
<script>
    const tom = new Tom();
    console.log(tom.sayHello());
</script>

Open demo

●Using from Node.js

const Tom = require('./mylib.min.js');
const tom=new Tom();
console.log(tom.sayHello());//->Hi, I am Tom.

●Example of using ES6's import statement

import Tom  from './mylib.min.js';
const tom=new Tom();
console.log(tom.sayHello());//->Hi, I am Tom.

●Tips for this recipe

The Jack class is included as code in the bundle even though it is not accessible from outside.
This is purely wasteful, so if your Jack class isn't used by anyone, don't put it in your source code.

3. Other options

3-1.Set a separate namespace for each module type.

When libraryTarget: 'umd' is specified
Root, AMD, and CommonJS can have different library names (namespaces).
However, you cannot specify a library name for CommonJS2 (for node.js) as before, it will be ignored.

Build Configuration

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: {
         root: 'GreatFamily',
         amd: 'great-family',
         commonjs: 'common-great-family',
    },
     libraryExport: '',
     libraryTarget: 'umd',
     globalObject: 'this',
     umdNamedDefine: true,
}

See full source code of webpack.config.js

    library: {
         root: 'GreatFamily',
         amd: 'great-family',
         commonjs: 'common-great-family',
    },

In the above part,
the library name is given for each module type.

Be careful if you want to use the AMD module type.
Specify umdNamedDefine: trueP if you want to add library name to AMD.

Let's see the result of building with this setting.
The bundle is shown below.
As you can see, each module type has a specified library name.

family.min.js

(function webpackUniversalModuleDefinition(root, factory) {
    //for CommonJS2 environment
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    //for AMD environment
    else if(typeof define === 'function' && define.amd)
        define("great-family", [], factory);
    //for CommonJS environment
    else if(typeof exports === 'object')
        exports["common-great-family"] = factory();
    //for Root
    else
        root["GreatFamily"] = factory();
})(this, function() {...}

See full source code of bundle(develop build)

3-2.Set a separate comment for each module type.

By writing auxiliaryComment, you can add comments to the source code of each module type definition of the generated code of bundle.

Build Configuration

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: {
         root: 'GreatFamily',
         amd: 'great-family',
         commonjs: 'common-great-family',
    },
    libraryExport: '',
    libraryTarget: 'umd',
    globalObject: 'this',
    umdNamedDefine: true,
    auxiliaryComment: {
        root: 'Comment for Root',
        commonjs: 'Comment for CommonJS',
        commonjs2: 'Comment for CommonJS2',
        amd: 'Comment for AMD'
    }
}

See full source code of webpack.config.js

As you can see below,
you can see the comments in the bundle.

family.min.js

(function webpackUniversalModuleDefinition(root, factory) {
    //Comment for CommonJS2
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    //Comment for AMD
    else if(typeof define === 'function' && define.amd)
        define("great-family", [], factory);
    //Comment for CommonJS
    else if(typeof exports === 'object')
        exports["common-great-family"] = factory();
    //Comment for Root
    else
        root["GreatFamily"] = factory();
})(this, function() {...}

See full source code of bundle(develop build)

3-3.Make library name looks like namespace separated by periods like "org.riversun.GereatFamily".

If you want to name the library "org.riversun.GreatFamily",
for example, specify an array like library: ['org', 'riversun', 'GreatFamily']

Build Configuration

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: ['org', 'riversun', 'GreatFamily'],
    libraryExport: '',
    libraryTarget: 'umd',
    globalObject: 'this',
    umdNamedDefine: true,
},

See full source code of webpack.config.js

Source code of the library

family.js

export class Tom {
    sayHello() {
        return 'Hi, I am Tom.'
    }
}
export class Jack {
    sayHello() {
        return 'Hi, I am Jack.'
    }
}

Source code for using this library

●Using from Browser

<script src="./mylib.min.js"></script>
<script>
    const tom = new org.riversun.GreatFamily.Tom();
    const jack = new org.riversun.GreatFamily.Jack();
    console.log(tom.sayHello());
    console.log(jack.sayHello());
</script>

Open demo

As mentioned above, in case of node.js (CommonJS2), library name is ignored .

3-4.Separate external libraries(dependencies) using "externals"

If your library uses an external library (if it has dependencies), there are two types of build methods.

One method is to bundle an external library into your own library.
The other method is to externalize an external library.

This section describes "externalization" .

Here is an example of code where the Tom class depends on external library @riversun/simple-date-format.

**Install an external library

Install an external library to be used as development dependencies.

npm install --save-dev @riversun/simple-date-format

Build Configuration

Add externals into webpack.config.js as below.

webpack.config.js

entry: {
    'mylib': [`./src/family.js`],
},
output: {
    filename: `[name].min.js`,
    library: 'Tom',
    libraryExport: 'default',
    libraryTarget: 'umd',
    globalObject: 'this',

},
externals: {
    SDF: {
        commonjs: '@riversun/simple-date-format',
        commonjs2: '@riversun/simple-date-format',
        amd: '@riversun/simple-date-format',
        root: 'SimpleDateFormat'
    }
}

See full source code of webpack.config.js

In the following part, the part specified as "SDF" means the property name for referring to the external library from the source code.


externals: {
    SDF: {
        commonjs: '@riversun/simple-date-format',
        commonjs2: '@riversun/simple-date-format',
        amd: '@riversun/simple-date-format',
        root: 'SimpleDateFormat'
    }
}

Write "Library type name:Library name" (same as npm install) as shown below in the child element of SDF.

commonjs: '@riversun/simple-date-format',
commonjs2: '@riversun/simple-date-format',
amd: '@riversun/simple-date-format',

Library name can be set for each module type like commonjs, commonjs2, amd.
SDF in the example above acts as an alias. What the SDF actually points to is an external library specified for each module type.

Look at this at the bottom,

root: 'SimpleDateFormat'

When using your own library on the browser,
SDF is built to reference SimpleDateFormat(=window.["SimpleDateFormat"]).

● Generated bundle

When building, the following bundle is generated,


(function webpackUniversalModuleDefinition(root, factory) {
    //for CommonJS2
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("@riversun/simple-date-format"));
    //for AMD
    else if(typeof define === 'function' && define.amd)
        define("Tom", ["@riversun/simple-date-format"], factory);
    //for CommonJS
    else if(typeof exports === 'object')
        exports["Tom"] = factory(require("@riversun/simple-date-format"));
    //for Root
    else
        root["Tom"] = factory(root["SimpleDateFormat"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_SDF__) {...})

See full source code of bundle(develop build)

You can see that the code that loads the external library is generated for each module type.

This way you can avoid bundling external libraries.

Let's look at the source code of "my" library.

Source code of the library

family.js

import SimpleDateFormat from "SDF";

export default class Tom {
    sayHello() {
        const date = new Date();
        const sdf = new SimpleDateFormat();
        return `Hi, I am Tom. Today is ${sdf.formatWith("EEE, MMM d, ''yy", date)}`;
    }
}

You can see that SDF in import SimpleDateFormat from" SDF "; is an alias of the original import SimpleDateFormat from"@riversun/simple-date-format";.

Next, let's look at using my library created by separating the external library.

Source code for using this library

●Using from Browser

When using from a browser, read the external library from the CDN as follows
Note that dependent libraries (external libraries) are loaded "before" my library.

<script src="https://cdn.jsdelivr.net/npm/@riversun/simple-date-format@1.1.0/dist/simple-date-format.js"></script>
<script src="./mylib.min.js"></script>
<script>
    const tom = new Tom();
    document.write(tom.sayHello());
</script>

Open demo

By the way,
the external library used this time was also built by the method of 1-4 in this article.

●Using from Node.js

const Tom = require('./mylib.min.js');
const tom = new Tom();
console.log(tom.sayHello());//-> Hi, I am Tom.

How to run examples

Step 1.Clone this repository.

git clone https://github.com/riversun/making-library-with-webpack

Step2.Go to example directory like "part_1_1"

cd part_1_1

Step3.Run 'npm start' after npm install to start examples.

npm install
npm start

Thank you.

Written by Tom Misawa (https://github.com/riversun) on 2020-02-28

Introducing a handy JavaScript date formatting function.

riversun — Tue, 18 Feb 2020 03:21:49 +0000

I created A function to format the date (Date object) with a pattern like yyyy-MM-dd'T'HH:mm:ssXXX in JavaScript.
With this function alone, ISO8601 format, RFC1123 format, time zone RFC822, etc. can be expressed.
Pattern specification is like Java's SimpleDateFormat.

Date formatting function

function formatDate(formatStr, date, opts) {

    if (!date) {
        date = new Date();
    }

    opts = opts || {};

    let _days = opts.days;

    if (!_days) {
        _days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    }

    let _months = opts.months;

    if (!_months) {
        _months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    }

    const pad = (number, strDigits, isUnpad) => {
        const strNum = Math.abs(number).toString();
        if (!isUnpad && strNum.length > strDigits.length) {
            return strNum;
        } else {
            return ('0000' + strNum).slice(-strDigits.length);
        }
    };

    const timezone = (date, letter) => {
        const chunk = [];
        const offset = -date.getTimezoneOffset();
        chunk.push(offset === 0 ? 'Z' : offset > 0 ? '+' : '-');//add Z or +,-
        if (offset === 0) return chunk;
        chunk.push(pad(Math.floor(offset / 60), '00'));//hour
        if (letter === 'X') return chunk.join('');
        if (letter === 'XXX') chunk.push(':');
        chunk.push(pad((offset % 60), '00'));//min
        return chunk.join('');
    };

    const DELIM = '\0\0';
    const escapeStack = [];

    const escapedFmtStr = formatStr.replace(/'.*?'/g, m => {
        escapeStack.push(m.replace(/'/g, ''));
        return `${DELIM}${escapeStack.length - 1}${DELIM}`;
    });

    const formattedStr = escapedFmtStr
        .replace(/y{4}|y{2}/g, m => pad(date.getFullYear(), m, true))
        .replace(/M{3}/g, m => _months[date.getMonth()])
        .replace(/M{1,2}/g, m => pad(date.getMonth() + 1, m))
        .replace(/M{1,2}/g, m => pad(date.getMonth() + 1, m))
        .replace(/d{1,2}/g, m => pad(date.getDate(), m))
        .replace(/H{1,2}/g, m => pad(date.getHours(), m))
        .replace(/h{1,2}/g, m => {
            const hours = date.getHours();
            return pad(hours === 0 ? 12 : hours > 12 ? hours - 12 : hours, m);
        })
        .replace(/a{1,2}/g, m => date.getHours() >= 12 ? 'PM' : 'AM')
        .replace(/m{1,2}/g, m => pad(date.getMinutes(), m))
        .replace(/s{1,2}/g, m => pad(date.getSeconds(), m))
        .replace(/S{3}/g, m => pad(date.getMilliseconds(), m))
        .replace(/[E]+/g, m => _days[date.getDay()])
        .replace(/[Z]+/g, m => timezone(date, m))
        .replace(/X{1,3}/g, m => timezone(date, m));

    const unescapedStr = formattedStr.replace(new RegExp(`${DELIM}\\d+${DELIM}`, 'g'),
        m => {
            const unescaped = escapeStack.shift();
            return unescaped.length > 0 ? unescaped : '\'';
        });

    return unescapedStr;
}

Call function like as follows

const date = new Date();

//Format with patterns
console.log(formatDate("MMM dd, yyyy",date));
//->Feb 17, 2020

console.log(formatDate("MM/dd/yyyy",date));
//->02/17/2020

console.log(formatDate("EEE, MMM d, ''yy",date));
//->Mon, Feb 17, '20

console.log(formatDate("h:mm a",date));
//->8:46 PM

console.log(formatDate("hh 'o''''clock' a, Z",date));
//->08 o'clock PM, -0600

//ISO8601 format
console.log(formatDate("yyyyMMdd'T'HHmmssXX",date));
//->20200217T204746-0600

//ISO8601 format alt
console.log(formatDate("yyyy-MM-dd'T'HH:mm:ssXXX",date));
//->2020-02-17T20:47:46-06:00

//RFC1123(RFC822) format
console.log(formatDate("E, dd MMM yyyy HH:mm:ss Z",date));
//->Mon, 17 Feb 2020 20:47:46 -0600

The result is as follows:

Feb 17, 2020
02/17/2020
Mon, Feb 17, '20
8:47 PM
08 o'clock PM, -0600
20200217T204746-0600
2020-02-17T20:47:46-06:00
Mon, 17 Feb 2020 20:47:46 -0600
Mon, Feb 17, '20
Hello! It's 20:47:46.

Pattern of the date

The following examples show how date and time patterns are interpreted.
The given date and time are 2018-07-17 12:08:56 local time in Tokyo/Japan time zone.

Letter(s)	Date or Time Component	Examples
yyyy	Year	2018
yy		18
M	Month in year	7
MM		07
MMM	Month name	Jul
d	Day in month	17
dd		17
a	Am/pm marker	PM
H	Hour in day (0-23)	12
HH		12
E	day of week	Tue
h	Hour in am/pm (1-12)	12
hh		12
m	Minute in hour	8
mm		08
s	Second in minute	56
ss		56
S	Millisecond	789
Z	Timezone(RFC822)	+0900
X	Timezone(ISO8601)	+09
XX		+0900
XXX		+09:00
' '	Strings(Escaped)
''	Single Quote

Pattern examples

Format String	Example
yyyyMMdd'T'HHmmssXX (ISO 8601)	20180717T120856+0900
yyyy-MM-dd'T'HH:mm:ssXXX (ISO 8601)	2018-07-17T12:08:56+09:00
E, dd MMM yyyy HH:mm:ss Z	Tue, 17 Jul 2018 12:08:56 +0900
yyyy.MM.dd 'at' hh:mm:ss Z	2018.07.17 at 12:08:56 +0900
EEE, MMM d, ''yy	Tue, Jul 17, '18
h:mm a	12:08 PM
hh 'o''''clock' a, X	12 o'clock PM, +09
yyyyMMddHHmmssSSS	20180717120856789

Live demo

Repository

The library version is in the following repository for ease of use.

https://github.com/riversun/simple-date-format

"Builder Pattern" generator for Java

riversun — Thu, 01 Aug 2019 01:32:24 +0000

Introduction

I want to introduce my web app that can generate "Builder Pattern" source code for Java.
With this tool, you can instantly generate Builder patterns: "Effective Java", "GoF", "Telescoping Constructor", "Lombok", "Mandatory Properties"

https://riversun.github.io/java-builder/

(Made only with HTML / CSS / JS , no server side)

As shown below, if you enter "[Type] [Variable]" in Definition, the generated code will be reflected in real time on the right.

When you have finished entering the code, press Copy to Clipboard to copy the code and paste it into your IDE or editor.

Example of generated code

Definition

Just type like as follows and you can get full source code of Builder pattern.

package com.example
class Person
@Required String name
@Required Integer age
@Required String gender
@Required Integer height
String eyeColor
String hairColor
String hobby

When @NotNull annotation is added to the beginning of the variable definition, it becomes a Required parameter and generates a code to check null when building.

Generated code example "Effective Java"

Person.java

package com.example;

public class Person {

  private String name;
  private Integer age;
  private String gender;
  private Integer height;
  private String eyeColor;
  private String hairColor;
  private String hobby;

  public static class Builder {

    private String name;
    private Integer age;
    private String gender;
    private Integer height;
    private String eyeColor;
    private String hairColor;
    private String hobby;

    public Builder() {    
    }

    Builder(String name, Integer age, String gender, Integer height, String eyeColor, String hairColor, String hobby) {    
      this.name = name; 
      this.age = age; 
      this.gender = gender; 
      this.height = height; 
      this.eyeColor = eyeColor; 
      this.hairColor = hairColor; 
      this.hobby = hobby;             
    }

    public Builder name(String name){
      this.name = name;
      return Builder.this;
    }

    public Builder age(Integer age){
      this.age = age;
      return Builder.this;
    }

    public Builder gender(String gender){
      this.gender = gender;
      return Builder.this;
    }

    public Builder height(Integer height){
      this.height = height;
      return Builder.this;
    }

    public Builder eyeColor(String eyeColor){
      this.eyeColor = eyeColor;
      return Builder.this;
    }

    public Builder hairColor(String hairColor){
      this.hairColor = hairColor;
      return Builder.this;
    }

    public Builder hobby(String hobby){
      this.hobby = hobby;
      return Builder.this;
    }

    public Person build() {
        if(this.name == null){
          throw new NullPointerException("The property \"name\" is null. "
              + "Please set the value by \"name()\". "
              + "The properties \"name\", \"age\", \"gender\" and \"height\" are required.");
        }
        if(this.age == null){
          throw new NullPointerException("The property \"age\" is null. "
              + "Please set the value by \"age()\". "
              + "The properties \"name\", \"age\", \"gender\" and \"height\" are required.");
        }
        if(this.gender == null){
          throw new NullPointerException("The property \"gender\" is null. "
              + "Please set the value by \"gender()\". "
              + "The properties \"name\", \"age\", \"gender\" and \"height\" are required.");
        }
        if(this.height == null){
          throw new NullPointerException("The property \"height\" is null. "
              + "Please set the value by \"height()\". "
              + "The properties \"name\", \"age\", \"gender\" and \"height\" are required.");
        }

        return new Person(this);
    }
  }

  private Person(Builder builder) {
    this.name = builder.name; 
    this.age = builder.age; 
    this.gender = builder.gender; 
    this.height = builder.height; 
    this.eyeColor = builder.eyeColor; 
    this.hairColor = builder.hairColor; 
    this.hobby = builder.hobby;     
  }

  public void doSomething() {
      // do something
  }
}

You you want to use this builder cod,
just write like this.

AppMain.java

public static void main(String[] args) {
        new Person.Builder().name("riversun").age(12).gender("male").height(200).build().doSomething();

    }

Generated code example of "GoF"

Person.java

package org.example;
import java.util.ArrayList;
import java.util.List;

public class Person {

  private String name;
  private int age;
  private String sex;
  private List<String> hobby = new ArrayList<String>();

  public Person() {

  }

  public Person(String name, int age, String sex, List<String> hobby) {
    this.name = name; 
    this.age = age; 
    this.sex = sex; 
    this.hobby = hobby; 
  }

  public Person setName(String name){
    this.name = name;
    return Person.this;
  }

  public String getName(){
    return this.name;
  }

  public Person setAge(int age){
    this.age = age;
    return Person.this;
  }

  public int getAge(){
    return this.age;
  }

  public Person setSex(String sex){
    this.sex = sex;
    return Person.this;
  }

  public String getSex(){
    return this.sex;
  }

  public Person setHobby(List<String> hobby){
    this.hobby = hobby;
    return Person.this;
  }

  public Person addHobby(String hobby){
    this.hobby.add(hobby);
    return Person.this;
  }

  public List<String> getHobby(){
    return this.hobby;
  }

  public void doSomething(){
    System.out.println("Person's properties");
    System.out.println("name="+name);
    System.out.println("age="+age);
    System.out.println("sex="+sex);
    System.out.println("hobby="+hobby);  
  }
}

Builder.java

package org.example;
import java.util.List;

public interface Builder {

  public void name(String name);
  public void age(int age);
  public void sex(String sex);
  public void hobby(List<String> hobby);

  Person getResult();
}

PersonBuilder.java

package org.example;
import java.util.List;

public class PersonBuilder implements Builder {
  private Person person;

  public PersonBuilder() {
    this.person = new Person();
  }

  @Override
  public void name(String name) {
    this.person.setName(name);
  }

  @Override
  public void age(int age) {
    this.person.setAge(age);
  }

  @Override
  public void sex(String sex) {
    this.person.setSex(sex);
  }

  @Override
  public void hobby(List<String> hobby) {
    this.person.setHobby(hobby);
  }


  @Override
  public Person getResult() {

    if(this.person.getName() == null){
      throw new NullPointerException("The property \"name\" is null. "
          + "Please set the value by \"builder.name()\" at Director class. "
          + "The property \"name\" is required.");
    }

    return this.person;
  }
}

Director.java

package org.example;

public class Director {

  private Builder builder;

  public Director(Builder builder) {
    this.builder = builder;
  }

  public void construct() {
    builder.name("something"); // required property
    builder.age(0); // optional property
    builder.sex("something"); // optional property
    //builder.hobby(new ArrayList<>());
  }
}

AppMain.java

package org.example;

public class AppMain {

  public static void main(String[] args) {

    Builder builder = new PersonBuilder();
    Director director = new Director(builder);
    director.construct();
    Person person = builder.getResult();
    person.doSomething();

  }
}

Generated source code of "Telescoping Constructor"

Person.java

package org.example;
import java.util.ArrayList;
import java.util.List;

public class Person {

  private String name;
  private int age;
  private String sex;
  private List<String> hobby = new ArrayList<String>();

  public Person() {

  }

  public Person(String name, int age, String sex, List<String> hobby) {
    this.name = name; 
    this.age = age; 
    this.sex = sex; 
    this.hobby = hobby; 
  }

  public Person setName(String name) {
    this.name = name;
    return Person.this;
  }

  public String getName() {
    return this.name;
  }

  public Person setAge(int age) {
    this.age = age;
    return Person.this;
  }

  public int getAge() {
    return this.age;
  }

  public Person setSex(String sex) {
    this.sex = sex;
    return Person.this;
  }

  public String getSex() {
    return this.sex;
  }

  public Person setHobby(List<String> hobby) {
    this.hobby = hobby;
    return Person.this;
  }

  public Person addHobby(String hobby){
    this.hobby.add(hobby);
    return Person.this;
  }

  public List<String> getHobby() {
    return this.hobby;
  }

}

Generated source code of "Lombok"

Person.java

package org.example;
import java.util.ArrayList;
import java.util.List;

public class Person {

  private String name;
  private int age;
  private String sex;
  private List<String> hobby;

  Person(String name, int age, String sex, List<String> hobby) {

    if(name == null){
      throw new NullPointerException("The property \"name\" is null. "
          + "Please set the value by \"name()\". "
          + "The property \"name\" is required.");
    }

    this.name = name; 
    this.age = age; 
    this.sex = sex; 
    this.hobby = hobby; 
  }

  public static PersonBuilder builder(){
    return new PersonBuilder();
  }  
  public static class PersonBuilder {

    private String name;
    private int age;
    private String sex;
    private List<String> hobby = new ArrayList<String>();

    PersonBuilder() {    
    }

    public PersonBuilder name(String name){
      this.name = name;
      return PersonBuilder.this;
    }

    public PersonBuilder age(int age){
      this.age = age;
      return PersonBuilder.this;
    }

    public PersonBuilder sex(String sex){
      this.sex = sex;
      return PersonBuilder.this;
    }

    public PersonBuilder hobby(List<String> hobby){
      this.hobby = hobby;
      return PersonBuilder.this;
    }

    public PersonBuilder addHobby(String hobby){
      this.hobby.add(hobby);
      return PersonBuilder.this;
    }

    public Person build() {
      return new Person(this.name, this.age, this.sex, this.hobby);
    }
    @Override
    public String toString() {
      return "Person.PersonBuilder(name=" + this.name + ", age=" + this.age + ", sex=" + this.sex + ", hobby=" + this.hobby + ")";
    }
  }

  @Override
  public String toString() {
    return "Person(name=" + this.name + ", age=" + this.age + ", sex=" + this.sex + ", hobby=" + this.hobby + ")";
  }

  public void doSomething() {
      // do something
  }
}

You you want to use this builder cod,
just write like this.

AppMain.java

public class AppMain {
    public static void main(String[] args) {
        System.out.println(Person.builder().name("Tom").age(12).sex("male").build());
    }
}

Generated source code of "Mandatory Properties"

It is a Builder pattern that can set mandatory properties in the correct order.

Person.java

package com.example;
import java.util.Optional;

public class Person {

  private final String name;// Required
  private final Integer age;// Required
  private final String gender;// Required
  private final Integer height;// Required
  private final Optional<String> eyeColor;// Optional(use Optional<String>)
  private final Optional<String> hairColor;// Optional(use Optional<String>)
  private final Optional<String> hobby;// Optional(use Optional<String>)

  Person(Builder.Builder1 builder) {
    this.name = builder.name; 
    this.age = builder.age; 
    this.gender = builder.gender; 
    this.height = builder.height; 
    this.eyeColor = builder.eyeColor; 
    this.hairColor = builder.hairColor; 
    this.hobby = builder.hobby; 
  }
  public static Builder builder() {
    return new Builder();
  }

  public static final class Builder {
    public Builder1 name(String name) {
      return new Builder1(name);
    }
    public static final class Builder1 {
      final String name;
      Integer age;
      String gender;
      Integer height;
      Optional<String> eyeColor;
      Optional<String> hairColor;
      Optional<String> hobby;

      private Builder1(String name) {
        this.name = name;
      }
      public Builder2 age(Integer age) {
        this.age = age;
        return new Builder2(Builder1.this);
      }
    }
    public static final class Builder2 {
      final Builder1 builder;

      private Builder2(Builder1 builder) {
        this.builder = builder;
      }
      public Builder3 gender(String gender) {
        this.builder.gender = gender;
        return new Builder3(this.builder);
      }
    }
    public static final class Builder3 {
      final Builder1 builder;

      private Builder3(Builder1 builder) {
        this.builder = builder;
      }
      public Builder4 height(Integer height) {
        this.builder.height = height;
        return new Builder4(this.builder);
      }
    }
    public static final class Builder4 {
      final Builder1 builder;

      private Builder4(Builder1 builder) {
        this.builder = builder;
      }
      public Builder4 eyeColor(String eyeColor){
        this.builder.eyeColor = Optional.of(eyeColor);
        return this;
      }
      public Builder4 hairColor(String hairColor){
        this.builder.hairColor = Optional.of(hairColor);
        return this;
      }
      public Builder4 hobby(String hobby){
        this.builder.hobby = Optional.of(hobby);
        return this;
      }
      public Person build() {
        return new Person(this.builder);
      }
    }
  }

  public String name() {
    return this.name;
  }
  public Integer age() {
    return this.age;
  }
  public String gender() {
    return this.gender;
  }
  public Integer height() {
    return this.height;
  }
  public Optional<String> eyeColor() {
    return this.eyeColor;
  }
  public Optional<String> hairColor() {
    return this.hairColor;
  }
  public Optional<String> hobby() {
    return this.hobby;
  }

  @Override
  public String toString() {
    return "Person(name=" + this.name + ", age=" + this.age + ", gender=" + this.gender + ", height=" + this.height + ", eyeColor=" + this.eyeColor + ", hairColor=" + this.hairColor + ", hobby=" + this.hobby + ")";
  }

  public void doSomething() {
      // do something
  }
}

Generator Tips

The following ideas have been put in place with the aim of typical code output where the generated code can be used as is as possible without setting the details.

Effective Java Template

For type of List<> like as List<String> hobby;, generate code initialized with new ArrayList();
Also, in the case of List, generate a method like addHobby(String hobby) so that items can be added individually.

GoF Template

GoF's Builder pattern is more complicated than other patterns in construction, generate main class named AppMain.java.
Added temporary code to construct() method of Director.java.

public void construct() {
    builder.name("something");
    builder.age(0);
    builder.sex("something");
    //builder.hobby(new ArrayList<>());
  }

I hope it helps.

When you get unintended results in Eclipse's code completion that might be the side effect of substring code completion.

riversun — Sun, 28 Jul 2019 12:08:09 +0000

Overview

When you want to complete the method name of a class,sometimes eclipse will complete an unintended method name.
I want to explain the measures in such a case.
It's probably a side effect of the new feature "Substring code completion" added in Eclipse NEON

Environment

Eclipse IDE 2019‑06

"Unintended completion" is as follows.Take a look first.

After entering "Arrays", enter a dot(.) To start code completion.
Next, if you enter "tostring" and press the enter key, "deepToString" is selected as a problem.

"Substring code completion" is a useful feature,you know.

Even if only "string" is typed, those that include "string" as part of the method name will be suggested as candidates.

Solution-1: Turn off substring completion

Select Window>Preference>Java>Editor>Content Assist ,then you can find Show substring matches setting .And then turn it off

Try to use "substring completion off"

It feels pretty good.
Unintentional "deepToString" is no longer complemented.

However, if "substring completion" is off, substring completion can not be completed naturally.

I tried typing "string" after "Arrays." and there were no more candidates.

Solution-2

Reopen settings window as before Window>Preference>Java>Editor>Content Assist and turn "substring completion" on

Next, click the [+] "plus" mark on "Content Assist", then expand the settings and select "Advanced".

Check Java Proposals like as follows.

Try code completion

Look at this.

It seems that it moves by the intended action

Try Code Completion with Substring Match

The substring completion is also working properly.

Solution-2 seems to work more as intended.

Impression

As for code completion, I think, "Intellij IDEA" (or Android Studio) is much more advanced and corresponds to "substring code completion" and seems to be pre-tuned to have no such side effects.

(I didn't notice it until I encountered it in Eclipse, but the slight differences improved by the tuning of the feeling of use affect productivity and quality, etc.)

How to run webpack-dev-server on express

riversun — Sat, 22 Jun 2019 14:02:49 +0000

How to run webpack-dev-server on express.

Example for Auto reloading (live reload) using webpack-dev-middleware and webpack-hot-middleware.

Overview

■ By including webpack-dev-server in express , you can do the following things!

No need to manually reload the browser when you change the front-end' source code.
No need to manually restart server when you change the server-side' source code.

■ Library
Use webpack-dev-middleware and webpack-hot-middleware on express.

Let's get started.

(1) Project creation

Create a project from scratch including both front end and server side.
Create a directory with a suitable name and create as an npm project.

mkdir webpack-dev-server-on-express
cd webpack-dev-server-on-express
npm init

(2) Installation of required modules

Install required modules

Installation of webpack modules

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-dev-middleware webpack-hot-middleware

Installation of server modules

npm install --save-dev express multer babel-watch

Installation of front-end modules

npm install --save-dev @babel/core @babel/preset-env babel-loader core-js@3

(3)Make Front-End scripts

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
</head>
<body>

<h3>Addition</h3>
<form action="" method="post" id="myform">
    <input type="number" name="firstValue"><br>
    <span>+</span><br>
    <input type="number" name="secondValue"><br>
</form>
<span>=</span><br>
<input type="number" id="result" readonly><br><br>

<button id="btn-clac">Calc</button>
<script src="js/app.js"></script>
</body>
</html>

index.js

const btnSend = document.querySelector('#btn-clac');

btnSend.addEventListener('click', evt => {

    const xhr = new XMLHttpRequest();

    xhr.addEventListener('load', evt => {

        if (xhr.status == 200) {
            const result = JSON.parse(xhr.response);
            const resultEle = document.querySelector('#result');
            resultEle.value = result.sum;
        }
    });

    xhr.addEventListener('error', evt => {
        console.error(evt);
    });

    xhr.open('post', 'api/add', true);

    const formEle = document.querySelector('#myform');
    const formData = new FormData(formEle);

    xhr.send(formData);

});

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 8080,
        host: `localhost`,
    },
    entry: {
        app: [
            './src_client/index.js'
        ]
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/js/',
        filename: `[name].js`,
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        'modules': 'false',//commonjs,amd,umd,systemjs,auto
                                        'useBuiltIns': 'usage',
                                        'targets': '> 0.25%, not dead',
                                        'corejs': 3
                                    }
                                ]
                            ]
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {}
    },
    plugins: [],

};

(4)Make Server-Side scripts

server.js

const express = require('express');
const multer = require('multer');
const multipart = multer();

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('../webpack.config.js');

const app = express();
const port = 8080;

const devServerEnabled = true;

if (devServerEnabled) {
    //reload=true:Enable auto reloading when changing JS files or content
    //timeout=1000:Time from disconnecting from server to reconnecting
    config.entry.app.unshift('webpack-hot-middleware/client?reload=true&timeout=1000');

    //Add HMR plugin
    config.plugins.push(new webpack.HotModuleReplacementPlugin());

    const compiler = webpack(config);

    //Enable "webpack-dev-middleware"
    app.use(webpackDevMiddleware(compiler, {
        publicPath: config.output.publicPath
    }));

    //Enable "webpack-hot-middleware"
    app.use(webpackHotMiddleware(compiler));
}

app.use(express.static('./public'));

//API
app.post('/api/add', multipart.any(), function (req, res) {

    //execute addition(tasizan)
    const firstValue = parseInt(req.body.firstValue);
    const secondValue = parseInt(req.body.secondValue);
    const sum = firstValue + secondValue;

    //return result
    res.json({sum: sum, firstValue: firstValue, secondValue: secondValue});

});

app.listen(port, () => {
    console.log('Server started on port:' + port);
});

const express = require('express');
const multer = require('multer');
const multipart = multer();

Here, we are importing the express, and multer for processing multi-part form data .
When a form object created by "new FormData()" is sent using the POST method with XMLHttpRequest, the data is encoded in "multipart/form-data".
So we can use "multer" instead of "body-parser" for parsing request body on express.

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('../webpack.config.js');

Import webpack , webpack-dev-middleware , webpack-hot-middleware to server.js.
webpack.config.js is read as a config object.

 //reload=true:Enable auto reloading when changing JS files or content
 //timeout=1000:Time from disconnecting from server to reconnecting
 config.entry.app.unshift('webpack-hot-middleware/client?reload=true&timeout=1000');

It means the same as reloading like as follows.

entry: {
    app: [
    'webpack-hot-middleware/client?reload=true&timeout=1000',
    './src_client/index.js'
    ]
},

(5)Starter script into package.json

Add following into package.json.

"start": "babel-watch ./src_server/server.js"

package.json

{
  "name": "webpack-dev-server-on-express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start:client": "webpack-dev-server --config webpack.config.js",
    "start": "babel-watch ./src_server/server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-hot-middleware": "^2.25.0",
    "express": "^4.17.1",
    "multer": "^1.4.1",
    "babel-watch": "^7.0.0",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6",
    "core-js": "^3.1.4"
  }
}

Start the server and try the Auto Reload development environment.

npm start

You can try the app on http://localhost:8080

TIPS

If you got error like this.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initially used using a configuration object that does not match the API schema.
-Configuration should be an object.

This happens when module.exports of webpack.config.js doesn't returns Object but returns function.
For example, in the following webpack.config.js, the lambda function is returned so that it can branch by an argument at startup.
The above problem occurs at such times.

webpack.config.js(returning function style)

const path = require('path');
module.exports = (env, argv) => {
    const conf = {
        mode: 'development',
        devServer: {
            contentBase: path.join(__dirname, 'public'),
            port: 8080,
            host: `localhost`,
        },
        entry: {
            app: ['./src_client/index.js']
        },
        output: {
            path: path.join(__dirname, 'dist'),
            publicPath: '/js/',
            filename: `[name].js`,
        },
        resolve: {
            alias: {}
        },
        plugins: [],
    }
    return conf;
};

So you can change your code from this

const config = require('../webpack.config.js');

to this.

const webpackConfigJs = require('../webpack.config.js');
const config = webpackConfigJs();

Source Code

https://github.com/riversun/webpack-dev-server-on-express

How to use Promise in Java

riversun — Thu, 02 May 2019 19:04:28 +0000

I've developed a promise library for java so let me introduce it.

Overview

You can easily control asynchronous operations like JavaScript's Promise.
Supports both synchronous and asynchronous execution.
All the examples presented in this article are here. https://github.com/riversun/java-promise-examples

Quick Look

Writing a Promise in Javascript

A typical example of using promise in JavaScript is:



Promise.resolve('foo')
    .then(function (data) {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                const newData = data + 'bar';
                resolve(newData);
            }, 1);
        });
    })
    .then(function (data) {
        return new Promise(function (resolve, reject) {
            console.log(data);
        });
    });
console.log("Promise in JavaScript");

Writing a Promise in java-promise

Write the same thing using java-promise



import org.riversun.promise.Promise;
public class Example {

    public static void main(String[] args) {
        Promise.resolve("foo")
                .then(new Promise((action, data) -> {
                    new Thread(() -> {
                        String newData = data + "bar";
                        action.resolve(newData);
                    }).start();
                }))
                .then(new Promise((action, data) -> {
                    System.out.println(data);
                    action.resolve();
                }))
                .start();
        System.out.println("Promise in Java");
    }
}

Syntax:

Yes,you can write in a syntax similar to JavaScript as follows:



Promise.resolve()
        .then(new Promise(funcFulfilled1), new Promise(funcRejected1))
        .then(new Promise(functionFulfilled2), new Promise(functionRejected2))
        .start();

Dependency

Maven



<dependency>
    <groupId>org.riversun</groupId>
    <artifactId>java-promise</artifactId>
    <version>1.1.0</version>
</dependency>

Gradle



compile group: 'org.riversun', name: 'java-promise', version: '1.1.0'

Quick Start

Execute sequentially by chained "then"

Use Promise.then() to chain operations.
Write your logic in Func.run(action,data).
Start operation by Promise.start and run asynchronously(run on worker thread)
Calling action.resolve makes the promise fullfilled state and passes the result to the next then



public class Example00 {

    public static void main(String[] args) {

        Func function1 = (action, data) -> {
            new Thread(() -> {
                System.out.println("Process-1");
                try {
                    Thread.sleep(500);
                } catch (InterruptedException e) {}
                //Specify result value.(Any type can be specified)
                action.resolve("Result-1");
            }).start();
        };

        Func function2 = (action, data) -> {
            System.out.println("Process-2 result=" + data);
            action.resolve();
        };

        Promise.resolve()
                .then(new Promise(function1))
                .then(new Promise(function2))
                .start();// start Promise operation

        System.out.println("Hello,Promise");
    }
}

Diagram:

Result:



Hello,Promise
Process-1
Process-1 result=Result-1

Tips

It's also OK to just write Promise.then(func).



Promise.resolve()
        .then(function1)
        .then(function2)
        .start();// start Promise operation

Description

What is "Func" ?

Func is a java interface equivalent to JavaScript's Function for argument of #then



public interface Func {
    public void run(Action action, Object data) throws Exception;
}

You can write Func like a JavaScript function.

I want to show two ways of implementing Func class.

No.1)Write Func object in the normal way.



Func function = new Func() {
    @Override
    public void run(Action action, Object data) throws Exception {
        System.out.println("Process");//write your logic
        action.resolve();
    }
};

No.2)Write Func object using lambda expression.



Func function = (action, data) -> {
    System.out.println("Process");//write your logic
    action.resolve();
};

What is "Action" ?

Action object is an argument of Func#run method.

Call action.resolve( [fulfillment value] ) to make the Promise's status fulfilled and move on to the next processing(specified by then) with the result(fulfillment value).



action.resolve("Success");

Call action.reject( [rejection reason] ) to make the Promise's status rejected and move on to the next processing(specified by then) with the result(rejection reason).



action.reject("Failure");

Argument is optional, you can call action.resolve() or action.reject()



action.resolve();//Argument can be omitted

Usage

Rejection

If action.reject() is called, or if an exception thrown while executing Func.run(), rejected status is set to Promise, and the onRejected function specified to then is called.

call action.reject



Func function = (action, data) -> {
  action.reject("Failure");
};

throw an exception



Func function = (action, data) -> {
  throw new Exception("something");
};

Let's see Promise.then() method,

the 2nd argument of Promise.then() can be set to a Func to receive the result of rejection when receiving the result of then.

Syntax

Usage Promise.then(onFulfilled[, onRejected]);
onFulfilled is a Func object called if the Promise is fulfilled.

You can receive the previous execution "fulfilled" result as an argument named data.
onRejected is a Func object called if the Promise is rejected.

You can receive the previous execution "rejected" result(mainly the objects are exceptions) as an argument named data.



//Rejection
public class ExampleRejection {
    public static void main(String[] args) {
        Promise.resolve()
                .then((action, data) -> {
                    System.out.println("Process-1");
                    action.reject();
                })
                .then(
                        // call when resolved
                        (action, data) -> {
                            System.out.println("Resolved Process-2");
                            action.resolve();
                        },
                        // call when rejected
                        (action, data) -> {
                            System.out.println("Rejected Process-2");
                            action.resolve();
                        })
                .start();// start Promise operation

        System.out.println("Hello,Promise");
    }
}

Diagram:

Result:



Hello,Promise
Process-1
Rejected Process-2

Promise.always

Promise.always() always receive both fulfilled and rejected results.



public class ExampleAlways {

    public static void main(String[] args) {
        Func func2OutReject = (action, data) -> {
            action.reject("I send REJECT");
            //action.resolve("I send RESOLVE");
        };
        Func func2ReceiveAlways = (action, data) -> {
            System.out.println("Received:" + data);
            action.resolve();
        };
        Promise.resolve()
                .then(func2OutReject)
                .always(func2ReceiveAlways)
                .start();
    }
}

Diagram:

Result



Received:I send REJECT

Promise.all

Execute multiple promises at the same time, and after all executions are complete, move to the next processing with then

Execute multiple promises simultaneously and wait until all the execution is finished before proceeding.
If all finishes with resolve, execution results will be stored as java.util.List in the order of invocation.
If there is even one rejection, store that rejection reason in the result when the rejection occurs and move on to the next "then".



import java.util.List;

import org.riversun.promise.Func;
import org.riversun.promise.Promise;

public class ExampleAll {
    public static void main(String[] args) {
        Func func1 = (action, data) -> {
            Promise.sleep(1000);
            System.out.println("func1 running");
            action.resolve("func1-result");
        };
        Func func2 = (action, data) -> {
            Promise.sleep(500);
            System.out.println("func2 running");
            action.resolve("func2-result");
        };
        Func func3 = (action, data) -> {
            Promise.sleep(1500);
            System.out.println("func3 running");
            action.resolve("func3-result");
        };
        Func funcGetResult = (action, data) -> {
            List<Object> resultList = (List<Object>) data;
            for (int i = 0; i < resultList.size(); i++) {
                Object o = resultList.get(i);
                System.out.println("No." + (i + 1) + " result is " + o);
            }
            action.resolve();
        };
        Promise.all(func1, func2, func3)
                .always(funcGetResult)
                .start();
    }
}

Diagram:

Result:



func2 running
func1 running
func3 running
No.1 result is func1-result
No.2 result is func2-result
No.3 result is func3-result

Threading

It is also possible to execute Promise processing on the specified executor.
Note if you use your own executor, remember to shut it down after use.
If you use your own executor, it will NOT be shutdown automatically　　

At least one worker thread to be used in Promise.all,
and one thread for overall asynchronous execution, so a total of two or more threads must be needed.



public class Example {

    public static void main(String[] args) {

        final ExecutorService myExecutor = Executors.newFixedThreadPool(5);

        Func func1 = (action, data) -> {
            System.out.println("func1 on " + Thread.currentThread().getName());
            action.resolve();
        };

        Func func2 = (action, data) -> {
            System.out.println("func2 on " + Thread.currentThread().getName());
            action.resolve();
        };

        Func func3 = (action, data) -> {
            System.out.println("func3 on " + Thread.currentThread().getName());
            action.resolve();
        };

        Promise.all(myExecutor, func1, func2, func3)
                .then((action, data) -> {
                    System.out.println("final process on " + Thread.currentThread().getName());
                    myExecutor.shutdown();//If you use your own executor, remember to shut it down after use
                    action.resolve();
                })
                .start();
    }
}

Result:



func1 on pool-1-thread-2
func2 on pool-1-thread-3
func3 on pool-1-thread-4
final process on pool-1-thread-1

SyncPromise

SyncPromise, as the name implies, is a synchronous promise.

While Promise is executed asynchronously, SyncPromise does NOT move next while it is chained by "then".

All other features are the same as Promise.



public class Example02 {

    public static void main(String[] args) {
        Func func1 = (action, data) -> {
            new Thread(() -> {
                System.out.println("Process-1");
                action.resolve();
            }).start();

        };
        Func func2 = (action, data) -> {
            new Thread(() -> {
                System.out.println("Process-2");
                action.resolve();
            }).start();

        };
        SyncPromise.resolve()
                .then(func1)
                .then(func2)
                .start();
        System.out.println("Hello,Promise");
    }
}

Result:



Process-1
Process-2
Hello,Promise

Even if func1 and func2 are executed in a thread,

System.out.println("Hello,Promise") is always executed after that.Because SyncPromise is synchronous execution.

How to quickly create Chat Bot UI for both smartphones and PCs

riversun — Fri, 05 Apr 2019 10:25:45 +0000

Overview

It is a brief guide for creating the chatbot UI in JavaScript.

Responsive: Auto detect Smartphone and PC browser and render a correct chat UI.
Minimally invasive:Do not jam existing content , and it works if you put only one script tag in html

[here is a demo]

This demo is simple echo chat. But a few command available.

If you write "show buttons", you can see action buttons on chat UI.
Or you write "show image", you can see image in chat.

Example project is available on this repo.
https://github.com/riversun/chatux-example

Target

People who can write Java Script (even beginners)
People with node.js environment (npm or yarn can be used)
People interested in chatbots

What you can do

Create a chatbot UI that supports both PC browser and Smart Phone like the following demo

In the case of smartphone, the chat UI is displayed on the chat UI fitted to the screen.

In the case of PC browser, the chat UI is displayed on the floating window. I will explain in the main part what technology is used to achieve this.

Install and minimal code

using npm

install

npm install chatux --save

code

import {ChatUx} from 'chatux';

const chatux = new ChatUx();

chatux.init({
    api: {
        endpoint: 'http://localhost:8080/chat',//chat server
        method: 'GET',//HTTP METHOD when requesting chat server
        dataType: 'json'//json or jsonp is available
    }
});

chatux.start();

using with script tag

<script src="https://riversun.github.io/chatux/chatux.min.js"></script>

code

const chatux = new ChatUx();

chatux.init({
    api: {
        endpoint: 'http://localhost:8080/chat',//chat server
        method: 'GET',//HTTP METHOD when requesting chat server
        dataType: 'json'//json or jsonp is available
    }
});

chatux.start();

How it works

The system of chatux is very simple.

Let's look at the execution sequence of chatux.

Suppose you have a chat server for chatux at http://localhost:8080/chat
Specify server endpoint like this.

chatux.init({
    api: {
        endpoint: 'http://localhost:8080/chat',
        method: 'GET',
        dataType: 'json'
    }
});

The following is the sequence.

1.　chatux sends user input text to chat server.

GET http://localhost:8080/chat?text=hello
2.　The server processes user input text and returns a response as JSON.

{
  "output": [
    {
      "type": "text",
      "value": "You say 'hello'"
    }
  ]
}

3.　According to the response, chatux renders the result on the chat screen.

So, if you create chat server that can do this kind of interaction, you can easily create chatbots etc.

Next, let's see how to render.

Chat server

Let's create a simple chat server.

initialize npm project and install express

npm init
npm install express

Write a simple server that returns json.

const express = require('express');
const app = express();
const port = 8080;

// enabling CORS
app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept');
    next();
});
app.get('/chat', function (req, res) {
    const userInputText = req.query.text;

    const response = {
        output: []
    };

    const msg = response.output;
    msg.push({
        type: 'text',
        value: `You say ${userInputText}`
    });
    res.json(response);
});

app.listen(port, () => {
    console.log('chat server started on port:' + port);
});

start server

npm start

Access directory

http://localhost:8081/chat?text=hello

You will get JSON for chatux as follows.

{"output":[{"type":"text","value":"You say hello"}]}

Access from ChatUX on browser

chatux.init({
    api: {
        endpoint: 'http://localhost:8080/chat',
        method: 'GET',
        dataType: 'json'
    }
});
chatux.start(true);//true:automatically open chat

How to render a chat UI

Since chatux can render various variations of chat UI, I introduce them below.
I want to show raw JSON and code example for chat server respectively.

Show text

SERVER CODE

app.get('/chat', function (req, res) {
    const response = {output: []};
    const msg = response.output;
    msg.push({
        type: 'text',
        value: 'Hello world'
    });
    res.json(response);
});

JSON

{
  "output": [
    {
      "type": "text",
      "value": "Hello world!"
    }
  ]
}

RESULT

Show image

SERVER CODE

app.get('/chat', function (req, res) {
    const response = {output: []};
    const msg = response.output;
    msg.push({
        type: 'image',
        value: 'https://avatars1.githubusercontent.com/u/11747460'
    });
    res.json(response);
});

JSON

{
  "output": [
    {
      "type": "image",
      "value": "https://avatars1.githubusercontent.com/u/11747460"
    }
  ]
}

RESULT

Show action buttons

SERVER CODE

app.get('/chat', function (req, res) {
    const response = {output: []};
    const msg = response.output;
    const opts = [];
    opts.push({label: 'label1', value: 'value1'});
    opts.push({label: 'label2', value: 'value2'});
    opts.push({label: 'label3', value: 'value3'});
    msg.push({type: "option", options: opts});
    res.json(response);
});

JSON

{
  "output": [
    {
      "type": "option",
      "options": [
        {
          "label": "label1",
          "value": "value1"
        },
        {
          "label": "label2",
          "value": "value2"
        },
        {
          "label": "label3",
          "value": "value3"
        }
      ]
    }
  ]
}

RESULT

Show html

SERVER CODE

app.get('/chat', function (req, res) {
    const response = {output: []};
    const msg = response.output;
    msg.push({
        type: 'html',
        value: 'Click <a href="https://github.com/riversun" target="_blank" >here</a> to open a page.',
        delayMs: 500
    });
    res.json(response);
});

JSON

{
  "output": [
    {
      "type": "html",
      "value": "Click <a href=\"https://github.com/riversun\" target=\"_blank\" >here</a> to open a page.",
      "delayMs": 500
    }
  ]
}

RESULT

Show youtube

SERVER CODE

app.get('/chat', function (req, res) {
    const response = {output: []};
    const msg = response.output;
    const videoId = 'TP4lxliMHXY'; //youtube video id
    msg.push({
        type: 'youtube',
        value: videoId,
        delayMs: 500 // wait(milliseconds)
    });
    res.json(response);
});

JSON

{
  "output": [
    {
      "type": "youtube",
      "value": "TP4lxliMHXY",
      "delayMs": 500
    }
  ]
}

RESULT

Show multiple elements

SERVER CODE

app.get('/chat', function (req, res) {
    const response = {output: []};
    const msg = response.output;
    msg.push({
        type: 'text',
        value: 'What is this?',
        delayMs: 500
    });
    msg.push({
        type: 'image',
        value: 'https://upload.wikimedia.org/wikipedia/commons/a/a3/Aptenodytes_forsteri_-Snow_Hill_Island%2C_Antarctica_-adults_and_juvenile-8.jpg'
    });
    const opts = [];
    opts.push({label: 'bob', value: 'value1'});
    opts.push({label: 'riversun', value: 'value2'});
    opts.push({label: 'john', value: 'value3'});
    msg.push({type: 'option', options: opts});
    res.json(response);
});

JSON

{
  "output": [
    {
      "type": "text",
      "value": "What is this?",
      "delayMs": 500
    },
    {
      "type": "image",
      "value": "https://upload.wikimedia.org/wikipedia/commons/a/a3/Aptenodytes_forsteri_-Snow_Hill_Island%2C_Antarctica_-adults_and_juvenile-8.jpg"
    },
    {
      "type": "option",
      "options": [
        {
          "label": "bob",
          "value": "value1"
        },
        {
          "label": "riversun",
          "value": "value2"
        },
        {
          "label": "john",
          "value": "value3"
        }
      ]
    }
  ]
}

RESULT

Initialization parameters

The following example shows all ChatUX initialization parameters.
You can customize the behavior of ChatUX as you like.


    const chatux = new ChatUx();

    //init parameters
    const opt = {
        renderMode: 'auto',//'auto' or 'pc' or 'mobile'
        buttonOffWhenOpenFrame: false,//true:Turn off wakeup button when the chat window is opened.only for pc mode.
        bot: {
            wakeupText: null,//user input which is automatically send to server on startup
            botPhoto: null,//URL of bot photo image
            humanPhoto: null,//URL of human photo image
            widget: {
                sendLabel: 'SEND',//label for SEND button
                placeHolder: 'Say something'//default caption for input box
            }
        },
        api: {
            endpoint: 'http://localhost:8081/chat',//endpoint of chat server
            method: 'GET',//'GET' or 'POST'
            dataType: 'json',//'json' or 'jsonp'
            errorResponse: {
                output: [
                    //Message displayed when a network error occurs when accessing the chat server
                    {type: 'text', value: 'Sorry, an error occurred'}
                ]
            }
        },
        window: {
            title: 'My chat',//window title

            //infoUrl
            // If this value is set, an 'info' icon will appear at the left of the window's
            // title bar, and  clicking this icon will jump to this URL
            infoUrl: 'https://github.com/riversun/chatux',
            size: {
                width: 350,//window width in px
                height: 500,//window height in px
                minWidth: 300,//window minimum-width in px
                minHeight: 300,//window minimum-height in px
                titleHeight: 50//title bar height in px
            },
            appearance: {
                //border - border style of the window
                border: {
                    shadow: '2px 2px 10px  rgba(0, 0, 0, 0.5)',
                    width: 0,
                    radius: 6
                },
                //titleBar - title style of the window
                titleBar: {
                    fontSize: 14,
                    color: 'white',
                    background: '#4784d4',
                    leftMargin: 40,
                    height: 40,
                    buttonWidth: 36,
                    buttonHeight: 16,
                    buttonColor: 'white',
                    buttons: [
                        //Icon named 'hideButton' to close chat window
                        {
                            fa: 'fas fa-times',//specify font awesome icon
                            name: 'hideButton',
                            visible: true
                        }
                    ],
                    buttonsOnLeft: [
                        //Icon named 'info' to jump to 'infourl' when clicked
                        {
                            fa: 'fas fa-comment-alt',//specify font awesome icon
                            name: 'info',
                            visible: true
                        }
                    ],
                },
            }
        },
        //wakeupButton style
        wakeupButton: {
            right: 20,//right position in pixel
            bottom: 20,//bottom position in pixel
            size: 60,//wakeup button size
            fontSize: 25//wakeup button font size for fontawesome icon
        },
        //Define a callback method to be called when an event occurs
        methods: {
            onChatWindowCreate: (win) => {
                //Called only once when a chat window is created
                console.log('#onChatWindowCreate');
            },
            onChatWindowPause: (win) => {
                //Called when the chat window is closed
                console.log('#onChatWindowPause');
            },
            onChatWindowResume: (win) => {
                //Called when the chat window is back to open
                console.log('#onChatWindowResume');
            },
            onUserInput: (userInputText) => {
                //Called back when the user enters text.
                //In other words, this method can intercept text input.
                // If it returns true, it is treated as consumed and no user-input-text is sent to the server.
                console.log('#onUserInput userInputText=' + userInputText);
                if (userInputText === 'end') {
                    const consumed = true;
                    chatux.dispose();
                    return consumed;
                }
            },
            //For local test, get the user input text but stop accessing the chat server.
            // onServerProcess: (userInputText) => {
            //     const response = {"output": [{"type": "text", "value": 'You said "' + userInputText + '"'}]};
            //     return response;
            // },
            onServerResponse: (response) => {
                //A callback that occurs when there is a response from the chat server.
                // You can handle server responses before reflecting them in the chat UI.
                console.log('#onServerResponse response=' + JSON.stringify(response));
                return response;
            }
        }
    };

    //initialize
    chatux.init(opt);

    chatux.start(true);//true:open chat UI automatically

Summary

I introduced how to make a chat UI that supports both smartphone and PC browser with ChatUX.
If you want more custom, see README at https://github.com/riversun/chatux and source code may be helpful.

Introduction of Floating Window Library “JSFrame.js”

riversun — Sat, 19 Jan 2019 19:17:55 +0000

Hi there!
Today I would like to introduce the library "JSFrame.js" I made.
It is an independent and lightweight floating window library for JavaScript.
You can create various floating windows and popup windows like this.And It is licensed under MIT license.

I want to show you this demo first.Please take a look!

https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html

Do you like it?
You can create flowting windows easily, if you want.

What is “JSFrame.js” like?

It is an independent and lightweight multi-window library that do not depend on other libraries for JavaScript.

You can create various floating windows (called frame) and popup windows.
You can create a modal window.
You can create a toast.
You can create multi-window apps.
Popup windows and multi-windows covered move, resize, change appearance animation and so on.

Demo

The library achieves use with floating windows on browser.
https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html
https://riversun.github.io/jsframe/examples/v150/preset_material.html
https://riversun.github.io/jsframe/examples/v150/preset_win10.html
https://riversun.github.io/jsframe/examples/v150/chatbot_ui.html

How to use/install it

Using with script tag



<script src="https://riversun.github.io/jsframe/jsframe.js"></script>

Install from npm registry



npm install jsframe.js

Quick Start

Create window

Here's basic example of JSFrame.js to show a simple window.

Call the JSFrame.create method with initialization parameter to show a window
Set html as a content of the window.Content could simply be some text or html.
frame.show to show the window

Code of Create window



const jsFrame = new JSFrame();
const frame = jsFrame.create({
    title: 'Window',
    left: 20, top: 20, width: 320, height: 220,
    movable: true,//Enable to be moved by mouse
    resizable: true,//Enable to be resized by mouse
    html: '<div id="my_element" style="padding:10px;font-size:12px;color:darkgray;">Contents of window</div>'
});
//Show the window
frame.show();

[DEMO]
https://riversun.github.io/jsframe/examples/v150/simple.html

Result

Tips

You can also get DOM element from contents that you set as html.Call frame.$([selector]).For example, you can get the element which id is 'my_element' by calling frame.$('#my_element')



 frame.$('#my_element').innerHTML = '<span style="color:red">Hello world</span>';

Show specified URL as content of window

Set url to the initialization parameter.
The window contents will be shown as iframe.
Set callback function which is called after loading a page as urlLoaded

Code of URL to display in iframe



const frame01 = jsFrame.create({
    title: 'Window1',
    left: 20, top: 20, width: 320, height: 160,
    url: 'iframe_content01.html',//URL to display in iframe
    //urlLoaded:Callback function called after loading iframe
    urlLoaded: (frame) => {
      //Called when the url finishes loading
    }
});
frame01.show();

[DEMO]
https://riversun.github.io/jsframe/examples/v150/iframe.html

Result

Tips

You can also get DOM element in the page shown as window's content area specified by url(iframe) ,You can call like frame.$('#my_element').

Show window as a modal window

Call frame.showModal to show the window as a modal window.
By specifying like showModal(callbackFunc) you can receive a callback when the modal window is closed.

Code of modal window



 const modalFrame = jsFrame.create({
      name: 'my-modal-window',
      title: 'modal window',
      left: 0, top: 0, width: 320, height: 220,
      html: 'something'
  });

  //Show as a modal window
  modalFrame.showModal(_frame => {
  //Callback when modal window is closed.
  });

[DEMO]

https://riversun.github.io/jsframe/examples/v150/modal.html

Result

Styling

JSFrame.js has the option where you can design the window appearance or apply style to certain elements and then apply styles to them as you want.
You can specify style from preset or design it yourself.
Set appearanceName to initialization parameter to select the window design called appearance.
Or if you want to design appearance from scratch, you can set appearance to initialization parameter.

Code of Styling



const jSFrame = new JSFrame();

 //Style from preset
 const frame01 = jSFrame.create({
     title: 'Yosemite style',
     left: 20, top: 20, width: 320, height: 220,
     appearanceName: 'yosemite',//Preset name is 'yosemite','redstone','popup'
     style: {
         backgroundColor: 'rgba(220,220,220,0.8)',
     },
     html: '<div style="padding:10px;">Preset is selected by preset name</div>'
 }).show();

[DEMO]

https://riversun.github.io/jsframe/examples/v150/styling.html

Result

Tips

Preset name of window title bar



     closeButton => Show close button

     minimizeButton => Show minimize button

     maximizeButton => Show maximize button

     zoomButton => Show zoom button

If you want to hide the window title bar,

Code of hide the title bar top button



  frame02.hideFrameComponent('minimizeButton');

Event handling

You can set an event handler (callback function) for the DOM element in the content specified by html or url.
You can also set an event handler for buttons on the title bar.
Call like frame.on(selector,'click',(_frame,event)=>{}); to set click event handler functions.

Code of set up event handler



//Set click handler for DOM element specified as html or url in the initialization parameters.
frame.on('minimizeButton', 'click', (_frame, evt) => {
});

//Event handler for buttons on the title bar.
frame.on('#bt_cancel', 'click', (_frame, evt) => {
});

[DEMO]
https://riversun.github.io/jsframe/examples/v150/event_handling.html

Result

Show toast messages.

A toast provides simple message about an operation in a small popup. Toasts automatically disappear after the time specified by duration.
Call JSFrame.showToast to show a toast.
You can customize the appearance and something.

Code of show toast



const jsFrame = new JSFrame();
  jsFrame.showToast({
      html: 'Default toast'
  });

[DEMO]

https://riversun.github.io/jsframe/examples/v150/toast_simple.html

Result

Tips

You can specify the position with align like below.

align:'top' =>Toast displayed at the top
align:'center' =>Toast displayed in the center
align:'bottom' =>Toast displayed at the bottom(default)

Code of Specify the position



jsFrame.showToast({
    align: 'center', html: 'Toast displayed in the center'
});

Customize toast

You can customize toast as bellows:

Code of Customize toast



jsFrame.showToast({
    width: 260,//Width
    height: 100,//Height
    duration: 2000,//Duration(millis)
    align: 'center',// Alignment from 'top'/'center'/'bottom'(default)
    style: {
        borderRadius: '2px',
        backgroundColor: 'rgba(0,124,255,0.8)',
    },
    html: '<span style="color:white;">Custom toast</span>',
    closeButton: true,//Show close button
    closeButtonColor: 'white'//Color of close button
});

[DEMO]
https://riversun.github.io/jsframe/examples/v150/toast.html

Window operation helper

Determine position by anchor with frame#setPosition

You can specify the position with frame#setPosition(x,y,anchor) like below.

Code of Specify position by anchor



//Specify a position
const align = 'CENTER_CENTER';//anchor

//(x,y)Specify the center of the screen as a coordinate, set the base point (anchor) to the horizontal vertical center (center_center) of the window
const x = window.innerWidth / 2;
const y = window.innerHeight / 2;
frame0.setPosition(x, y, align);

Types of Anchors

Horizontal	Vertical	Value
Left	Top	'LEFT_TOP'
Horizontal center	Top	'CENTER_TOP'
Right	Top	'RIGHT_TOP'
Left	Vertical center	'LEFT_CENTER'
Horizontal center	Vertical center	'CENTER_CENTER'
Right	Vertical center	'RIGHT_CENTER'
Left	Bottom	'LEFT_BOTTOM'
Horizontal center	Bottom	'CENTER_BOTTOM'
Right	Bottom	'RIGHT_BOTTOM'

Close window



frame.closeFrame();

Hide Window



frame.hide();

Focus window (and pull up to the front)

You can pull up window to the top by using frame#requestFocus.
After that,window gets the focus.



frame.requestFocus();

Get window by name

If you specify name in the initialization parameter, you can get the window from the Jsframe object as follows:



var frame = jsFrame.getWindowByName('my-modal-window');

Frame creation initialization parameters

Example of initialization parameters



const frame = jsFrame.create(

{

   name: 'my-window-name',//Window name.Unique name is required.

   title: 'Window0',//Window title

   left: 20,//x coordinate of the upper left corner of the window

   top: 20,//y coordinate of the upper left corner of the window

   width: 320,//width of the window

   height: 220,//height of the window

   minWidth: 160,//The minimum width of the window

   minHeight: 100,//The minimum height of the window

   movable: true,//true:You can move the window with mouse

   resizable: true,//true:You can resize the window with mouse

   appearance: appearanceObj,//Appearance object

   appearanceName: 'yosemite',//Preset name of appearance(Not with 'appearance')

   style: {//Style of the content.Can be specified just like inline style attribute.

       backgroundColor: 'rgba(220,220,220,0.8)',//Ex.Background color of content(Opacity can be specified)

       overflow: 'auto',//Ex.What to do when the drawing extends beyond the content area

   },

   html: 'Contents',//HTML shown in the content(Not with 'url')

   url: 'content01.html',//The URL for contents.To be shown in iframe.

   urlLoaded: (frame) = {}//Callback function when url is finished loading.

});

Summary

I hope this guide helped you understand how to use JSFrame.js

About this article

I introduced my work floating window library JSFrame.js
You can clone/fork the source code from here: https://github.com/riversun/JSFrame.js
You can install from npm by "install JSFrame.js".

History of JSFrame

First commit in 2004.
I used this JSFrame.js in my service around 2006. I've tried to update it according to the modern JS style ,but it's basically written in the 200x JS style :)
Released JSFrame.js as a npm library after adding some functions in 2018.

Thank you.

An easy way to display a toast with JavaScript

riversun — Thu, 10 Jan 2019 14:22:29 +0000

<!DOCTYPE html>
<html>
<body>
<script src="https://riversun.github.io/jsframe/jsframe.js"></script>
<script>
    const jsFrame = new JSFrame();
    jsFrame.showToast({
        html: 'This is a simple toast', align: 'top', duration: 2000
    });
</script>
</body>
</html>

Here is a simple demo.

And also you can customize like this.

For more details,check library on github.

DEV Community: riversun

Introducing LoadTime: Bringing Clarity to HuggingFace Model Loading Times

Example

How to convert ChatRWKV to Web API and talk to it from Web chat UIChat UI

Summary

Target

Environment

Main part

STEP0: Operation to serverize ChatRWKV

STEP1: Install related packages

STEP2: Edit chat.py to make it a chat server

STEP3: Obtain trained model data (weights)

BlinkDL/rwkv-4-pile-14b

BlinkDL/rwkv-4-pile-7b

BlinkDL/rwkv-4-pile-3b

STEP4: Set the learned model data (weights) in the code

STEP5: Place other files

5-1 Create ChatUI (HTML)

5-2 Putting the initial prompt

5-3 Putting tokenizer.json

STEP6: Start the chat server

STEP7: Execution

Summary

Recipes on how to create a library that supports both browser and Node.js

About

Table Of Contents

Examples on Github

riversun / making-library-with-webpack

How to build a library that supports both browser and Node.js using webpack4 and ES6

Recipes on how to create a library using webpack

About

How to run examples

1.One class in the library

1-1.Publish an "export default" class.

Build configuration

1.One class in the library

1-1.Publish an "export default" class.

Build configuration

Source code of the library

Source code for using this library

1-2.Publish an "export default" class with library name (like namespace).

Build Configuration

Source code of the library

Source code for using this library

1-3.Publish an "export default" class with library name without using the default property.

Build Configuration

Source code of the library

Source code for using this library

1-4.Publish an "export default" class with the setting "library name = class name".

Build Configuration

Source code of the library

Source code for using this library

1-5.Publish an "export default" class in a way called "reexport".

Build Configuration

Source code of the library

Source code for using this library

2.Multiple classes in the library

2-1.Publish multiple classes

Source code of the library

Build Configuration

Source code for using this library

2-2.Publish multiple classes with library name

Build Configuration

Source code of the library

Source code for using this library

2-3.Publish multiple classes including "export default" class

Source code of the library

Build Configuration

Source code for using this library

2-4.Publish only "export default" class from multiple classes.

Build Configuration

Source code of the library

Source code for using this library

3. Other options

3-1.Set a separate namespace for each module type.

Build Configuration

3-2.Set a separate comment for each module type.

Build Configuration

3-3.Make library name looks like namespace separated by periods like "org.riversun.GereatFamily".

Build Configuration