DEV Community: frustigor

WebCut: Redefining Web-Based Video Editing for Developers with Open-Source Excellence

frustigor — Fri, 12 Dec 2025 16:48:29 +0000

In the modern web development landscape, integrating professional-grade video editing capabilities into web applications has long been a formidable challenge. Developers often grapple with fragmented low-level libraries (such as FFmpeg.wasm), time-consuming UI component building (timelines, canvases, and toolbars), and performance bottlenecks in browser-based media processing. These pain points have left a gap: a solution that combines robust functionality, seamless integration, and developer-friendly design—until the arrival of WebCut.

WebCut, an open-source Web video editing UI framework developed by tangshuang, is engineered to empower developers to embed professional video editing features into web apps quickly, without sacrificing flexibility or performance. Unlike fragmented tools that require piecing together disparate components, WebCut delivers a cohesive, production-ready UI ecosystem tailored for the web. Below, we dive into its core strengths, compare it to competing solutions, and outline why it deserves a place in your development toolkit—along with your star on GitHub.

Core Strengths: Why WebCut Stands Out for Developers

WebCut’s value proposition is rooted in solving real-world developer pain points. Its design prioritizes ease of integration, performance optimization, extensibility, and type safety—all critical for enterprise and consumer-facing web applications. Here’s a detailed breakdown:

1. Out-of-the-Box Professional UI: No More "Building from Scratch"

WebCut eliminates the need to design and code foundational video editing UI components from the ground up. It ships with a complete suite of pre-built, customizable tools:

Canvas Editor: A WYSIWYG (What-You-See-Is-What-You-Get) canvas powered by @webav/av-canvas, enabling precise video frame manipulation, text/graphic overlay, and element positioning.
Timeline Controller: A high-precision timeline with zoom, segment management, and frame-level navigation—critical for professional editing workflows.
Player Controls: Native support for play/pause, volume adjustment, and progress tracking, with smooth synchronization across the canvas and timeline.
Element Transformation Tools: Intuitive controls for scaling, rotating, and repositioning media elements, plus support for numerical input for pixel-perfect adjustments.

For Vue developers (a dominant framework in enterprise and consumer apps), integration takes minutes, not days. A minimal implementation example demonstrates this simplicity:

<script setup lang="ts">
// Import core components and styles (Tree-shakable for smaller bundles)
import { WebCutEditor } from 'webcut';
import 'webcut/esm/style.css';

// Initialize project ID (for state management and persistence)
const projectId = 'your-unique-project-identifier';
</script>

<template>
  <!-- Full editor with canvas, timeline, and tools—no extra setup needed -->
  <div class="editor-container" style="height: 100vh; width: 100%;">
    <WebCutEditor :project-id="projectId" />
  </div>
</template>

2. Performance Optimized for the Web

Browser-based video editing often suffers from lag, especially with high-resolution media or complex timelines. WebCut addresses this through:

Efficient Rendering: Leverages @webav/av-canvas (a lightweight, web-optimized rendering library) to minimize DOM reflows and offload heavy computations where possible.
Lazy Loading of Assets: Only loads necessary media chunks and UI components, reducing initial load time and memory usage.
Frame-Level Precision Without Lag: Optimized timeline logic ensures smooth scrubbing and editing even with 1080p/4K video clips—critical for user experience.

3. Extensibility: Tailor to Your Workflow

While WebCut offers a complete out-of-the-box solution, it doesn’t lock developers into a rigid structure. Its modular architecture supports:

Custom Components: Replace or extend default UI elements (e.g., add a custom text styling panel or export module) without rewriting core logic.
Utility Functions: Access low-level tools (e.g., Blob export, text-to-image conversion, dimension calculation) for bespoke workflows.
Framework Flexibility: Though optimized for Vue 3, WebCut’s core logic is decoupled from the UI layer, enabling integration with React or vanilla JS via wrapper components (community contributions already support basic React compatibility).

4. Type Safety & Enterprise-Grade Reliability

For teams building mission-critical applications, WebCut delivers confidence through:

Full TypeScript Support: Every component, method, and utility includes type definitions, reducing runtime errors and improving IDE autocompletion.
MIT License: Permissive open-source licensing allows free use, modification, and commercial distribution—no hidden fees or vendor lock-in.
Active Maintenance: The project has 99+ commits, 3 core contributors, and regular updates (see the CHANGELOG.md for details), ensuring long-term support for production use.

WebCut vs. Competing Solutions: A Developer-Centric Comparison

To contextualize WebCut’s value, we compare it to four common alternatives developers use for web-based video editing. The table below focuses on developer experience, functionality scope, and production readiness—key factors for technical teams.

Solution	Core Positioning	UI Integration Complexity	Framework Compatibility	Performance (Web)	Open-Source?	Key Limitation vs. WebCut
WebCut	Full-stack video editing UI framework	Low (5-minute setup for Vue)	Vue 3 (primary), React/JS (via wrappers)	Optimized (1080p smooth)	Yes (MIT)	None—purpose-built for web editing UI
FFmpeg.wasm	Low-level video processing library	Very High (no UI; requires custom timeline/canvas)	Any (vanilla JS)	Good (but no UI layer)	Yes (MIT)	Lacks UI—developers must build all editing interfaces from scratch
Wave.video	Cloud-based video editing SaaS (API-only)	Medium (API integration + custom UI)	Any (API-driven)	Dependent on cloud latency	No (commercial)	Closed-source, costly for high volume, limited customization
Video.js	Video player with basic editing plugins	Medium (plugins add complexity)	Any (vanilla JS)	Good (but editing is limited)	Yes (Apache)	Only supports basic trimming—no timeline or canvas editing
OpenShot (Web Port)	Desktop video editor (experimental web port)	High (unstable, incomplete UI)	None (standalone)	Poor (laggy for 720p+)	Yes (GPL)	Web port is experimental—not production-ready

Key Takeaways from the Comparison:

vs. FFmpeg.wasm: WebCut adds a production-ready UI layer, eliminating the need to spend weeks building timelines, canvases, and controls.
vs. Wave.video: WebCut is open-source and self-hosted, avoiding API costs and enabling full customization of the editing experience.
vs. Video.js: WebCut offers professional editing (timeline, text overlay, element transformation) rather than just playback with basic trimming.
vs. OpenShot Web: WebCut is stable, optimized for the web, and designed for integration into apps—no experimental compromises.

Getting Started with WebCut: A Step-by-Step Guide

For developers ready to test WebCut, follow these steps to integrate it into a Vue 3 project (the fastest path to production):

1. Install Dependencies

WebCut supports all major package managers (npm, yarn, pnpm):

# Using pnpm (recommended for monorepos)
pnpm add webcut

# Using npm
npm install webcut

# Using yarn
yarn add webcut

2. Add the Editor to Your Vue Component

As shown earlier, the WebCutEditor component is the entry point for the full editing experience. For custom workflows (e.g., only using the timeline), import individual components:

<script setup lang="ts">
// Import individual components for custom UIs
import { WebCutTimeline, WebCutCanvas } from 'webcut';
import 'webcut/esm/style.css';

const projectId = 'your-project-id';
const currentTime = ref(0); // Sync timeline and canvas
</script>

<template>
  <div class="custom-editor">
    <!-- Custom layout: Canvas above timeline -->
    <WebCutCanvas :project-id="projectId" :current-time="currentTime" />
    <WebCutTimeline :project-id="projectId" v-model:current-time="currentTime" />
  </div>
</template>

3. Access Documentation & Resources

API Docs: Visit docs site for detailed component props and methods. Visit DeepWiki page for deep tech detail.
Examples: The examples/ directory in the repo includes demo projects for common use cases (e.g., social media video editors, educational content tools).
Demo Site: Visit webcut.top to test the editor in action before integrating.

Support the Project: Star WebCut on GitHub

Open-source projects thrive on community recognition—and every star helps WebCut reach more developers facing video editing integration challenges. Here’s why your star matters:

Visibility: Stars help WebCut appear in GitHub’s "Trending" sections, making it easier for teams to discover a production-ready alternative to costly SaaS tools or fragmented libraries.
Developer Morale: The core team (led by tangshuang) invests countless hours in maintaining and improving WebCut—your star is a tangible sign of appreciation.
Community Growth: More stars attract contributors, leading to faster feature updates (e.g., React-native support, advanced color grading tools) and bug fixes.

Star WebCut today: Visit the GitHub repository at https://github.com/tangshuang/webcut and click the "Star" button.

Final Thoughts

For developers tasked with building web applications that require professional video editing—whether for education, e-commerce, social media, or enterprise tools—WebCut is a game-changer. It eliminates the "reinvent the wheel" cycle of building editing UIs from scratch, delivers performance optimized for the web, and offers the flexibility to tailor workflows to your needs—all under a permissive open-source license.

Try WebCut in your next project, contribute to its development (pull requests are welcome!), and join the community of developers simplifying web-based video editing. Your star isn’t just a vote of confidence—it’s a step toward making professional web video editing accessible to every development team.

Light weight (5k) JS framework to create Web Components

frustigor — Wed, 31 Jan 2024 05:45:10 +0000

In our working time, sometimes we need to create some simple, light, quick components to render to any technology stacks. For example we build a screen loader component before js bundle back to expect users' waiting. Use PHC, you will be able to create a small component quickly into a Web Component which can be used in Vue, React or any others.

What's PHC?

PHC stands for words Hypertext Component, it means developers use HTML language to write a component. So we always name the component file by using .htm as extension. PHC do not need to compile your component code, because we are using HTML, vanillajs and css to write our UI. In summary, PHC is a light weight js framework to help developers to build light weight web components.

What's the difference?

Use Hypertext as development language, without any higher knowlege or concepts more than Web.
Run component as quickly as possible, without any build tool chain.
SFC: write a component with .htm file, deploy to CDN directly, no pack or compiling
Web Components: based on customElements, rendering in shadowDOM, supports isolated styles/css, supports slot for component
No Virtual DOM: modify DOM nodes directly
Asnyc Demanded Loading: only load demanded component files
Quick link: a to link a customElement quickly
Nested component system
Fast, vanilla.js as underlying driver
Small and light, 5kb

How to?

To use PHC, you should load the library firstly in the entry HTML file:

<script src="https://unpkg.com/phc"></script>

And then use <phc-x> tag to bootstrap your component:

<phc-x src="./some.htm"></phc-x>

Then write the component file some.htm (or generated by server side with PHP, Python, Ruby...)

Write a component

Write a some.htm file with Hypertext

<style>
.container {
  margin: 10px;
}
</style>

<div class="container">
  <main></main>
</div>

<script>
  fetch('some_article_url').then(res => res.text()).then((text) => {
    document.querySelector('.container main').innerText = text;
  });
</script>

Attributes

<phc-x type="book" src="./some.htm"></phc-x>

<script>
  const attrs = document.rootElement.attributes; // https://developer.mozilla.org/zh-CN/docs/Web/API/NamedNodeMap
  const type = attrs.type.value; // here `type` is the passed attribute whose value is `book`

  fetch(`some_article_url?type=${type}`).then(res => res.text()).then((text) => {
    document.querySelector('.container main').innerText = text;
  });
</script>

Sub-Components

Just continue write in a component file:

<phc-x src="./sub.htm"></phc-x>

Define Custom Element

Use <link> in your entry html file to define a custom element named react-app:

<link rel="phc" href="../react/react.htm" as="react-app">

Then you can use the custom element any where in your application:

<react-app></react-app>

Notice, you can not load a new custom element by async files or scripts any more.

define

Use define to setup a custom element at anywhere.

import { define } from 'https://unpkg.com/phc/es/index.js';
define('some-tag', '...some_url...');

Summary

PHC is a light weight js framework, It is so simple that we do not need any knowledge more than HTML5. However, developers can use it to define custom element very quickly. And it can even work with Vue, React or any other library (as dependencies inside components).

The project github address https://github.com/tangshuang/phc , if you are interested in it, give me a star on the repo page🙂

Ajax data request separate from state management

frustigor — Mon, 11 Sep 2023 16:53:32 +0000

Problems

You may have the experience about ajax request inside a state management code. In many cases, we have to be very careful about the ajax request because state lifecycle may cause several times request. And the data we want to use may from same source, but not easy to manage.

Let's review some examples.

async function getActivityConfig() {
  // ...
}

async function getUserActInfo() {
  const activityConfig = await getActivityConfig();
  // ...
}

async function getPageInfo() {
  const activityConfig = await getActivityConfig();
  const userActInfo = await getUserActInfo();
  // ...
}

In the previous code, I want to show a cause in which we have to request getActivityConfig twice. To avoid request twice, we may change the code to:

async function getPageInfo(activityConfig, userActInfo) {
  // ...
}

However, after this change, we have to invoke all the functions outside the module.

In this situation, we may be boring about data request arrangement. Is there a way to ignore the twice requesting? Yes!!

Any way, let's look into another example.

function useAsome() {
  const data = ref({});

  onMounted(() => {
    requestData().then((data) => {
      data.value = data;
    });
  });

  return data;
}

function useBsome() {
  const data = ref({});

  onMounted(() => {
    requestData().then((data) => {
      data.value = data;
    });
  });

  return data;
}

In the previous code, we define two composition api function to provide data for some components. However, the two functions are written by different people, they are not care about the ajax requesting duplicate. When the two function are used in different components, ajax requesting are sent more than once.

Is there a way to avoid this knowlege isolate amoung different developers even though teams? Yes!!

Data Source

Now, let's take a glance of FODS which is a small library to resolve data management problems.

In FODS, there is one core concept source. A source is a data request defination like a normal async function:

import { source } from 'fods';

const ActivityConfigDataSource = source(async () => {
  // ...
});

The source object contains the data source about activity config, and will feed the frontend codes data.

import { query } from 'fods';

const data = await query(ActivityConfigDataSource);

A data source can be query any times, the result will be the same until renew.

Yes, the underlying principle is CACHE. We save the data from data source in a memory cache and spit out it when be query.

The difference between source and cache is concept, a source stands for data and the way get data. A source may maintain different data by different params, for exmaple:

const BookDataSource = source((bookId) => {
  // ...
});

// ------------------

const someBook = await query(BookDataSource, bookId);

The output data is based on the given params. There is a store/depository inside a source object which maintain each params' data.

This is the way of FODS to manage data requests.

Now, we can use FODS to resolve our problems which mentioned at the begining of this article.

const ActivityConfigSource = source(async () => {
  // ...
});

const UserActInfoSource = source(async () => {
  const activityConfig = await query(ActivityConfigSource);
  // ...
});

const PageInfoSource = source(async () => {
  const activityConfig = await query(ActivityConfigSource);
  const userActInfo = await query(UserActInfoSource);
  // ...
});

When we want a data, we alway get it from a data source. And the same ajax request will never be sent after the first request is sent.

Renew Source

However, we may submit data from a form and the UI should be updated after new data comes. At this time, we need to renew the data source (re-pull data from http api).

async function handleSubmit(bookId) {
  // do submit
  await renew(BookDataSource, bookId);
  // refresh UI
}

In the previous code, we can renew to let the source use new data, and after flushing we will get new data when invoke query again, at this time, the UI will use new data to render.

Abstraction

FODS open a small window for our frontend developers to think about abstraction of frontend data layer. In our development experience, we always think how to arrange state, and treat ajax requests as some effects and do ajax in onMounted. However, may be, there is a perfect architecture which treat ajax requests as isolated operation disengage from UI programming.

In a frontend javascript application, data source is from database to ODS to BFF to browser/SSR, in fact, data is changing much less then state. A book's info data may not change for years, a student's info may not change for 3-5 years, even a shop order's data may not change during 10 minutes. The thing we need to do is renew it after it changed.

To renew a data may not must be done in a handler, it may be done by a websocket or any other way. If we split data ajax request out in our UI programming, it may be more comfortable for us to management state.

Summary

This article give you a glance of FODS to resolve duplicate ajax request problems. Any way, in FODS, there are more usages such as action stream and event listener. If you are interested in it, you can watch the github repo and give a star.

sveltejs vs. sfcjs

frustigor — Sun, 12 Sep 2021 10:20:05 +0000

Sveltejs is a js framework based on compiling, sfcjs is a js component runtime in browser with svelte style syntax. This article will compare their syntax.

"hello world"

Dynamic attributes

styling

Nested component

Reactive assignments

Reactive declarations

Declaring props

If blocks

Loop blocks

Await blocks

DOM events

Component events

Two-way-binding

Reactive styling

Smell jQuery like Vue, this small plugin is mgical!

frustigor — Tue, 01 Jun 2021 03:46:36 +0000

Hi, I am back for a long time.

Today I will introduce a jQuery plugin written by me. Yes, I did not give up jQuery, because many old systems are using jQuery and not be able to refactor and even need to support IE8. It is a strong UI driven library, even though react, vue cover the sky today. I love react too, but I thought, react is a UI library too, what is the difference? Reactive!!! React is a reactive UI libaray, but jQuery is not. Can I make jQuery a reactive library? Here is my answer.

![](https://github.com/tangshuang/jqvm/raw/master/jqvm.png) https://github.com/tangshuang/jqvm

A Quick Glance

I wrote the small plugin for jQuery, which costs hundreds lines, called jQvm (jQuery view model) following MVVM pattern. If you are familiar with jQuery, you will use it as a jQuery plugin as your familiar way. If you need to refactor your old jQuery system, maybe jQvm is an option.

Now, let's have a look into it:

<template id="app">
  <span>{{name}}</span>
  <span>{{age}}</span>
  <button jq-on="click:grow">Grow</button>
</template>

<script>
  $('#app')
      .vm({ name: 'tom', age: 10 })
      .fn('grow', state => state.age ++)
      .mount()
</script>

Yes, a template section and a jQuery plugin usage, done!
To import the plugin, you can use CDN:

<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jqvm/dist/jqvm.min.js"></script>

You do not need to compile or build the code, it is so lightweight that you can use it in any website which even is out of date.

(Notice, jQvm is based on jQuery 3.6.x, and use Object.defineProperty to implement reactive system, you may need some polyfill to resolve warnings in old browsers.)

Features

Ok, I know you are doubt with the features in jqvm which vue provides but not in jqvm. Let's take a review:

Mutable Reactive

In vue, you can modify properties on this to trigger rerenderer, it is the same in jQvm.

$(...).vm(...)
  .fn('change', state => e => state.value = e.target.value)

We directly change state to trigger rerenderer.

Conditional Render

In vue, you can use v-if to control the visibility of a node, you can use jq-if in jQvm.

<div jq-if="age > 10">I am older than 10.</div>

Loop Render

In vue, you use v-for to render loop set, you can use jq-repeat in jQvm.

<div jq-repeat="value,index in data traceby value.id">
  <span>{{index + 1}}</span>
  <span>{{value.name}}</span>
  <span>{{value.time}}</span>
</div>

Two Way Binding

In vue, you use v-model to bind a form component value with data, in jQvm you can use jq-bind.

<input jq-bind="age" />

Component

In vue, you can use another vue component in current one. However, in jQvm, it is different. There is a concept View in jQvm, a view is a instance created by .vm, for example:

const myComp = $(...)
  .vm(() => ...) // notice here, you should better use a function to return initState
  .fn(...)
  .on(...)

Notice that, I did not call .mount() at the end, this view is an alone View which is not be used in our system. Now we can use it as a component in our current view.

<div id="app">
  <my-comp></my-comp>
</div>

<script>
$('#app').vm(...)
  .component('my-comp', myComp)
  .mount()
</script>

With props, you can pass and receive events:

<div id="app">
  <my-comp type="search" :count="count" @change="handleChange"></my-comp>
</div>

<script>
const myComp = $(`
  <template>
    <i class="icon icon-{{type}}"></i>
    <span>{{count}}</span>
    <button>plus</button>
  </template>
`)
  .vm(() => ({ count: 0, type: 'text' }))
  .on('click', 'button', function(state) {
    this.emit('change', state.count + 1)
  })
$('#app').vm({ count: 4 })
  .component('my-comp', myComp)
  .fn('handleChange', state => count => state.count = count)
  .mount()
</script>

The previous code give type :count and @change props to my-comp.

Yeap! Isn't is like vue? You can explore more features here.

Why I wrote it (why not vue directly)? Because in some case, I do not need a heavyweight library/framework to enhance my application especially the old systems which written by jquery. And in my spare time, I write some small tools and can use jQvm so quickly to implement the UI.

If you think it is a good idea, please give a star on github here.

Bye~

Goodbye Redux! I have a preferer immutable react state manager

frustigor — Wed, 09 Sep 2020 02:10:20 +0000

I have used react and react-redux for a long time. During last 2 years, I found it is so complex when I want to find out a single data flow from a dispatcher to usage through over than 5 files that I am now boring with redux's reducer and sync operation which makes async operation evil. I have been thinking about building my own react global state manager and finally I built a library react-immut to implement my goal.

State data flow

In the ecology of react, we advocate one way data flow and immutable state circulation. In ideal, our state flow is like this:

However, UX handler will push data back, so it comes to be a circle like this:

Each time we want to update a component's props, we will propagate the event back to the root parent to change the parent's state to trigger UI rerender. This make nested components full of no-use-pipe props.

To make it more convenient, react offical propose flux architecture which guide us to build global state manager. Redux (react-redux) become the most popular global state manager. The state data flow pattern switch to crossing components' level like this:

Global state manager make it much more clear in deep nested components net. Every 2 components no matter how many levels space are there between them, they can communicate with each other by two step with redux as a middleman.

Evil Reducer

The time in which reducer was treated as a angel has past, along with code increasing, redux reducer and action functions make us headache. Why should I write so much non-real-related code? Our purposes is to finish UI building more quickly, but redux slow us down like a stumbling block. And when I debug, I have to jump amoung files to find out why the data has changed to make error. If you give me a knife, I will pass it to redux.

Let's look into what we will have in redux+react system:

Yes, we get one way data flow, but we have to code here, here and here...

And I must combine these all parts together and must make them work well without any error.

Too many parts cause fragility!

In fact, I do want to focus on business components' dev.

Diehard Immutable

To ensure my state change as immutable, I have grown to be a player of object-spread(...). Let's look into a case:

Eumm... Why should I write so many ... and have to create such a deep nested repeated object?

Magician Immer

Immer is a library which help developers to immutablly modify object. It is amazing that it provides only one API produce function:

import produce from 'immer'

And the typical usage is:

const next = produce(prev, draft => {
  draft.root.parent.child[1].name = 'new name'
})

In the second parameter, it looks like a mutable operation, but in fact, it is just a draft, the output next is a new object which is from prev.

From now on, I will drop object-spread operation thanks for immer, easy, clear and magic.

New Generation

React hooks is a new way to penetrate nested components net. React-redux has provided a useSelector hook function to get state from global store. useContext give us a chance to siphon from top context. useReducer is a sample plate for use to use [state, dispatch] pattern in local scope.

Generation 2 global state management is based on hooks. You may hear the new state manager Recoil which is published by a facebook team. In recoil, state and actions are abstract as atoms, selectors.

Decent ReactImmut

I costed a weekend to finish a library react-immut which is a global state manager and has similar API as react-redux but without reducers. Let's look into a glance:

import { createStore, Provider, useStore } from 'react-immut'

const store = createStore({
  name: 'tom',
  age: 10,
})

function App() {
  return (
    <Provider store={store}>
      <div class="container">
        <h3>Some Person</h3>
        <Person />
      </div>
    </Provider>
  )
}

function Person() {
  const [state, dispatch] = useStore()
  const { name, age } = state
  const grow = () => dispatch(state => {
    // here `state` is a draft of global state
    state.age ++
  })
  return (
    <div>
      <span>Name: {name}</span>
      <span>Age: {age} <button onClick={grow}>Grow</button></span>
    </div>
  )
}

Look, isn't is easy? We have no need to define reducers, and has a powerful dispatch which is based on immer and make state change clear, convenient and comfortable.

This is a typical usage of react-immut, you can learn more from repo. If you think this is cool, give me a star!

Summary

We have experienced crossing props state management, global middleman state management and now we are using hooks to manage our state (global or local). We have followed immutable (redux) and mutable (mobx) dispatching, and now we are facing mutable-produce-immutable dispatching. Which will you choose?

Write a small frontend reactive view-model framework based on jQuery with less than 500 lines code

frustigor — Wed, 29 Jul 2020 15:21:42 +0000

Last weekend I wrote a small tool which helps photo producers to bind watermark to their pictures. The tool is very easy and is written in Electron and jQuery. However, I have used Vue and React for a long time, it is sometimes awkward back to an old tech. So after I finished the tool, I summarized the practice and wrote a small reactive view-model for jQuery.

<template id="app">
  <div class="title">{{title}}</div>
  <div class="content">{{content}}</div>
  <div class="view-count">View: {{view}}</div>
</template>

const view = $('#app')
  .vm({
    title: 'Title',
    content: 'JQVM is a small frontend jquery plugin, and even a framework.',
    view: 0,
  })
  .on('click', state => function(e) {
    state.view ++
  })
  .mount()

The template part is very like vue's template, but we do not announce event listeners in template. Events are bound with on as jQuery does. The listener callback function is a combination of currying function. state is point to inner vm state, when you change the state, the view will rerender.

The core code is less than 500 lines, you can find the source code here. After minizing, the bundle file's size is only 46k (without jQuery). Small is beautiful.

https://github.com/tangshuang/jqvm

JQVM is not built with virtual dom, it is not used to build big applications, it is used to help jQuery lovers to setup a small app quickly and enjoy the reactive programming. Just play it with CDN, as you imported jQuery before. Believe me, you can setup a jqvm app in 10 seconds!

Better Form Programing in React

frustigor — Sun, 31 May 2020 13:10:34 +0000

I have worked on forms for months. During this time, I found it is so complex to finish a form in my project. My team is facing a big system, in which have several forms whose fields logic is very complicated. The form development experience is so bad, makes me thinking more about how to develop form more understandfully.

Finally, I create a library which help react developers to manage form development more easy.

Model

A form will operate some state to store user's selected/input values. However, to use them in UI rendering is not as though. I provide a Model to bind form state.

import { Model, Meta, Enum } from 'tyshemo'

class Name extends Meta {
  static default = 'lucy'
  static type = String
  static required = true
  static hidden = function() {
    return this.sex === 'M'
  }
  static label = 'Name'
}

class Sex extends Meta {
  static default = 'F'
  static type = new Enum(['F', 'M'])
  static label = 'Sex'
}

class Person extends Model {
  static name = Name
  static age = Age

  attrs() {
    return ['label']
  }
}

In Model, you should define properties of form. So that, you can manage your form state more formulatable.

connect

Choose a way to connect a component by react-tyshemo, so that you can arrange your UI.

import { useLocal } from 'react-tyshemo'

export default function MyComponent() {
  const person = useLocal(function() {
    return Person
  })

  // ...
}

Field

To make form works, you may render a form in your component. However, wait for a minute. Each field of form may have its own UX, how to make them work tegother?

In fact, it is easy to find that, a field will need some common information:

value: the value to render on screen
logic: required, readonly, disabled, hidden
extra: label, placeholder
handle: the function to update value

As metioned, we can make it easy to implement.

import { useLocal } from 'react-tyshemo'
import { Field } from 'react-tyshemo-form'

export default function MyComponent() {
  const person = useLocal(function() {
    return Person
  })

  return (
    <form>
      <Field model={person} key="name" render={(view) => {
        return (
          <div>
            <label>{view.label} {view.required ? '*' : ''}</label>
            <input 
              type="text" 
              value={view.value} 
              onChange={e => view.onChange(e.target.value)} 
              disabled={view.disabled} 
              readonly={view.readonly} 
              hidden={view.hidden} 
            />
          </div>
        )
      }} />
      <Field model={person} key="age" render={...} />
    </form>
  )
}

We provide a Field component, which use the model instance to render with a view parameter which contains all informations. So that you can operate your form state very clearly.

This is what you may need to operate form in react. A Model, a Field component and a connect function.

A mutable react state management container react-tyshemo

frustigor — Wed, 29 Apr 2020 11:46:03 +0000

You may use react-redux for a long time, now, try a new state management container.

import { use } from 'react-tyshemo'

// register a state space
use({
  name: 'statenamespace',

  state: {
    name: 'xxx',
    age: 10,
  },

  methods: {
    updateAge(age) {
      this.age = age
    },
  },
})

import { connect } from 'react-tyshemo'

function MyComponent(props) {
  const { name, age, updateAge } = props
  return <span onClick={() => updateAge(age + 1)}>grow</span>
}

const mapToProps = (state, methods) => {
  return {
    ...state.statenamespace,
    ...methods.statenamespace,
  }
}

const mergeToProps = (mapProps, ownProps) => {
  return {
    ...mapPorps,
    ...ownProps,
  }
}

export default connect(mapToProps, mergeToProps)(MyComponent)

Embrace mutable state, make things easy.

import { connect } from 'react-tyshemo'

function MyComponent(props) {
  const { some } = props
  return <span onClick={() => some.age ++}>grow</span>
}

const mapToProps = (state) => {
  return {
    some: state.statenamespace,
  }
}

export default connect(mapToProps)(MyComponent)

Notice the sentence some.age ++, it will trigger rerendering.

How to inject DLL scripts into html with HtmlWebpackPlugin?

frustigor — Sun, 15 Mar 2020 05:55:55 +0000

As a way to speed up building of webpack, DLL is an almost mentioned way. But when we use HtmlWebpackPlugin to auto inject scripts into html, the dll scripts will not be injected. So, do we have a way to do this?

Yes!

HtmlWebpackPlugin has hooks which can help us to implement this. In my solution, I create a shared plugin called InjectDllHtmlWebpackPlugin, and the source code:

class InjectDllHtmlWebpackPlugin {
  constructor(options) {
    this.options = options
  }
  apply(compiler) {
    compiler.hooks.compilation.tap('InjectDllHtmlWebpackPlugin', (compilation) => {
      compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync(
        'InjectDllHtmlWebpackPlugin',
        (data, cb) => {
          data.assets.js.unshift(...this.options.files)
          cb(null, data)
        }
      )
    })
  }
}

I used webpack v4.x, and HtmlWebpackPlugin version 3.2.0 whose hooks may change in version 4.x which is now in beta.

Let's look into HtmlWebpackPlugin's source code here. The author add some hooks for webpack v4, so that we can use htmlWebpackPluginBeforeHtmlGeneration hook to change assets.js option for the plugin to generate scripts tags.

Next, we use the previous plugin in webpack together with HtmlWebpackPlugin:

{
  plugins: [
    new DllReferencePlugin(...),
    new HtmlWebpackPlugin(...),
    // InjectDllHtmlWebpackPlugin should must come after HtmlWebpackPlugin
    new InjectDllHtmlWebpackPlugin({
      files: [
        'react.dll.js', // notice, this is the src url of script tag
      ],
    })
  ],
}

This is the way to auto add your dll scripts into your html. You can get my source code from project nautil.

Easy-GateWay: The fastest way to setup a Proxy Server

frustigor — Tue, 25 Feb 2020 13:12:13 +0000

You may run a private service on your remote server, however, one day, you want to debug something, and do not want to change your project code. You can use Easy-GateWay to setup a proxy server to serve your private service as public.

Environment required: NodeJS 10.x

npm i -g easy-gateway

Now, for example, you want to serve your private http://127.0.0.1:6000, you can do like this:

egw start --port=8080 --target=http://localhost:6000 --token=asdfjw982ng98f902jofa

Now, some other people can visit your service by using http://yourip:8080?token=asdfjw982ng98f902jofa. Isn't is easy?

To stop it, you should run in current directory:

egw stop

If you want to learn more about Easy-GateWay, visit git repo.

Use babel to remove ES6 Class no-use properties when bundle your code

frustigor — Fri, 06 Dec 2019 12:14:08 +0000

In some situation, when we bundle our code, we find some properties of a class are not needed in our project. For example, we wrote a class:

export default class A {
  a = 1
  static b = 2
  c() {}
  static d() {}
  e() {
    return false
  }
}

And we use it in our project like:

import A from './a'

const a = new A()
a.e()

We did not invoke a b c d of class A, but now, we have no idea to shake this methods/properties away from our code. Even through we have tree shaking, the tool like webpack has no idea to shake this no-use properties, it does not know which properties are used, and which are not.

After searching for ways to remove no-use properties, I did not find any good plugins or tools, so I have to write one, and published it as name babel-plugin-shake-class-properties and you can use it very easy.

npm i -D babel-plugin-shake-class-properties

And then modify your babel.config.js. (We only support babel.config.js because we need to point out the file's absolute path.)

// babel.config.js
const path = require('path')

module.exports = {
  ...
  plugins: [
    ['babel-plugin-shake-class-properties', {
      // the only properties we want to keep, other properties will be removed (except constructor)
      retain: [
        {
          file: path.resolve(__dirname, 'node_modules/tyshemo/src/store.js'), // the file's absolute path to match
          class: 'Store', // the class name from which properties will be removed
          properties: ['update', 'set'], // the properties which will be kept
        },
      ],
      // the properties we want to remove, properties even in `retain` will be removed
      remove: [
        {
          file: path.resolve(__dirname, 'node_modules/tyshemo/src/store.js'),
          class: 'Store',
          properties: ['update', 'set'], // the properties which will be removed
        },
      ],
    }],
    ...
  ],
}

In a item string of properties, you can use static async get set * keywords to match certain properties, for example:

class A {
  static a = 1
  get name() {}
  set name() {}
  * f() {}
  async fetch() {}
  async * r() {}
  static async * p() {}
  static get e() {}
}

If you want to remove all properties, aha?? you should use retain with properties: [''], however, to match strict, you could do like:

remove: {
  ...
  properties: [
    'static a',
    'get name',
    'set name',
    '* f',
    'async fetch',
    'async * r',
    'static async * p',
    'static get e',
  ],
}

Notice here, there should must be a space ' ' between * and the name of property.

Only ES6+ source class properties will be matched. The following situation will not work with this plugin. Computed properties will not work as possible:

class A {
  // will never be remove
  constructor() {
    // will not be realized
    this.a = '1'
  }

  // will not be realized
  [`some${a}`]() {}

  // will not be realized
  [Symbol('xxx')]() {}

  // will be treated as dd
  'dd'() {}

  // will be treated as ["dd"]
  ['dd']() {}

  // will be treated as [dd]
  [dd]() {}

  // will be treated as [dd]
  [dd] = 1

  // will be treated as ["dd"]
  ['dd'] = 1
}

function B() {}

// will not be realized
B.prototype.a = function() {}

// will not be realized
// you can use https://github.com/tangshuang/babel-plugin-transform-class-remove-static-properties to remove this
B.b = 'xxx'

If you are interested in this project, follow it on github https://github.com/tangshuang/babel-plugin-shake-class-properties and give a star.