search

airbnb / goji-js

React ❤️ Mini Program
https://goji.js.org
MIT License
224 stars 27 forks source link

Refactored the data structure in template and `setData` JSON data. #180

Closed malash closed 2 years ago

malash commented 2 years ago

What

This PR refactored the data structure in template and setData JSON data.

  1. GojiJS now provides 2 versions of data structure according to current build environment (yarn start or yarn build), one of them is for development with full fields name, another is for production with shorten name. E.g. meta.props.className => m.p.className could save more bundle size.

Development:

image

Production (formatted):

image
  1. All fleids of an element data, including type/props/children and etc., are all stored in a standalone object named meta. E.g. class="{{props.className}}" => class="{{meta.props.className}}".

Why

  1. More clear field names bring better code maintainable. The bundle size won't increase or even decrease because shorter name.
  2. The mate object could avoid some unexpected issue ( https://github.com/airbnb/goji-js/issues/179 ).
  3. It enables the possiablility to fix some tricky bugs in the next step like https://github.com/airbnb/goji-js/issues/140 https://github.com/airbnb/goji-js/issues/80 https://github.com/airbnb/goji-js/issues/79

How

Both @goji/core and @goji/cli should be modified.

I created a new function getTemplateIds that returns needed identifiers used by templates. This function can be accessed via import { unstable_getTemplateIds as getTemplateIds } from '@goji/core'; so every GojiJS packages could share it.

const ids = getTemplateIds();
console.log(ids.type); // logs `type` on development env and `t` on production env

Finally I tested this PR on internal large project and checked everything went well.