Skip to content

Commit 3db67f4

Browse files
jorenruijorenrui
authored
Merge pull request #21 from Group-One-Technology/jr.refactor/entity-variables-restructure
Refactor: Entity Variable Restructure
2 parents a6adeed + bcb1765 commit 3db67f4

15 files changed

+458
-270
lines changed

‎README.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
11
# MiniJS
22

3-
## Installation
4-
5-
To setup MiniJS in your local machine, you can do the following:
6-
7-
1. Clone the [repository](https://github.com/Group-One-Technology/minijs).
8-
2. Run `yarn` to install dependencies.
9-
3. Run `yarn build` to create the `dist` folder -> output for MiniJS.
10-
4. Run `yarn dev` to run the demo page locally.
11-
5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.
12-
6. Run `yarn test` to run the tests.
13-
143
## The Idea
154

165
- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.
@@ -22,6 +11,17 @@ To setup MiniJS in your local machine, you can do the following:
2211

2312
Read the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)
2413

14+
## Installation
15+
16+
To setup MiniJS in your local machine, you can do the following:
17+
18+
1. Clone the [repository](https://github.com/Group-One-Technology/minijs).
19+
2. Run `yarn` to install dependencies.
20+
3. Run `yarn build` to create the `dist` folder -> output for MiniJS.
21+
4. Run `yarn dev` to run the demo page locally.
22+
5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.
23+
6. Run `yarn test` to run the tests.
24+
2525
## Setting State
2626

2727
`State` are variables that changes the UI or the DOM that uses it when they get updated.

‎demo/observer.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<li>
3535
<button
3636
:click="this.parentNode.parentNode.removeChild(this.parentNode)"
37-
:text="`my id is ${this.getAttribute('id')} (hover me to change) list item (click to delete)`"
37+
:text="`look at my id list item (click to delete)`"
3838
:mouseenter="el.isHovered = true"
3939
:mouseleave="el.isHovered = false"
4040
:class="el.isHovered ? 'bg-red-200' : ''"

‎index.html

+8-7
Original file line numberDiff line numberDiff line change
@@ -263,13 +263,14 @@ <h3 class="font-bold font-mono">AirBnB Search Bar:</h3>
263263
:change="destination = this.value;
264264
filteredDestinations = destinations.search(destination)
265265
266-
if (filteredDestinations.length)
267-
selectedDestination = filteredDestinations.first
268-
else {
269-
const region = regions.find((region) => region.name === destination)
270-
if (region) selectedDestination = region.name
271-
else selectedDestination = null
272-
}"
266+
const region = regions.find((region) => region.name === destination)
267+
268+
if (region)
269+
selectedDestination = region.name
270+
else if (filteredDestinations.length)
271+
selectedDestination = filteredDestinations.first
272+
else
273+
selectedDestination = null"
273274
:keyup.up="selectedDestination = filteredDestinations.previousItem(selectedDestination)"
274275
:keyup.down="selectedDestination = filteredDestinations.nextItem(selectedDestination)"
275276
placeholder="Search destinations"

‎lib/entity.js

+11-110
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Lexer } from './generators/lexer'
2-
import { Events } from './entity/events'
3-
import { Attributes } from './entity/attributes'
4-
import { State } from './state'
5-
import { Mini } from './main'
1+
import { State } from '@/state'
2+
import { Mini } from '@/main'
63

7-
const IGNORED_IDS = ['$', 'this']
4+
import { Lexer } from '@/generators/lexer'
5+
6+
import { Events } from '@/entity/events'
7+
import { Attributes } from '@/entity/attributes'
8+
import { Data } from '@/entity/data'
89

910
export class Entity {
1011
constructor(el, dynamicScripts = []) {
@@ -13,11 +14,10 @@ export class Entity {
1314
this.tagName = el.tagName
1415
this.dynamicScripts = dynamicScripts
1516

16-
this.variables = []
17-
this.groupVariables = []
1817
this.id = this.generateEntityUUID()
1918

2019
this.state = {}
20+
this.data = new Data(this)
2121
this.events = new Events(this)
2222
this.attributes = new Attributes(this)
2323
this.base.state.addEntity(this)
@@ -89,106 +89,7 @@ export class Entity {
8989
}
9090

9191
getVariables() {
92-
this._getVariablesFromAttributes()
93-
this._getVariablesFromEvents()
94-
this._initVariables()
95-
}
96-
97-
_getVariablesFromAttributes() {
98-
this.attributes.dynamicAttributes.forEach((name) => {
99-
const attr = this.element.attributes[name]
100-
if (!attr) return
101-
102-
if (name === ':each') {
103-
const [_, variable] = attr.value.split(' in ')
104-
105-
const isNativeVariable =
106-
typeof window[variable] === 'function' &&
107-
window[variable].toString().indexOf('[native code]') === -1
108-
109-
if (isNativeVariable) return
110-
if (variable in this.state) return
111-
this.variables.push(variable)
112-
}
113-
114-
if (!attr.value) return
115-
116-
const lexer = new Lexer(attr.value)
117-
118-
const identifiers = lexer.identifiers.filter((value) => {
119-
if (IGNORED_IDS.includes(value)) return false
120-
const variable = value.split('.')[0]
121-
return !(variable in this.state)
122-
})
123-
124-
if (name === ':group') this.groupVariables.push(...identifiers)
125-
else this.variables.push(...identifiers)
126-
})
127-
}
128-
129-
_getVariablesFromEvents() {
130-
this.events.dynamicEvents.forEach((event) => {
131-
const expr = this.element.getAttribute(event)
132-
if (!expr) return
133-
134-
const lexer = new Lexer(expr)
135-
136-
const identifiers = lexer.identifiers.filter((value) => {
137-
if (IGNORED_IDS.includes(value)) return false
138-
const variable = value.split('.')[0]
139-
return !(variable in this.state)
140-
})
141-
142-
this.variables.push(...identifiers)
143-
})
144-
}
145-
146-
_initVariables() {
147-
this.variables = [...new Set(this.variables)]
148-
149-
this.variables.forEach((variable) => {
150-
if (State.isElState(variable)) {
151-
this.setAsGroup()
152-
153-
if (window[this.id] == null) {
154-
window[this.id] = this.base.state.create({}, this.id)
155-
}
156-
157-
this.base.state.addVariable(this.id, this.id)
158-
159-
if (variable !== State.EL_STATE) {
160-
const [_, varName] = variable.split('.')
161-
this.base.state.addEntityVariable(this.id, varName, this.id)
162-
}
163-
} else if (State.isGroupState(variable)) {
164-
if (!this.group) this.group = this.getGroup()
165-
166-
// Cases where group is not found:
167-
// - an each item with a :group directive being removed due to re-evaluation of :each attribute
168-
if (this.group == null) return
169-
170-
if (window[this.group.id] == null) {
171-
window[this.group.id] = this.base.state.create({}, this.group.id)
172-
}
173-
174-
this.base.state.addVariable(this.group.id, this.id)
175-
176-
if (variable !== State.GROUP_STATE) {
177-
const [_, varName] = variable.split('.')
178-
this.base.state.addEntityVariable(this.group.id, varName, this.id)
179-
}
180-
} else if (typeof window[variable] === 'function') {
181-
this.variables.splice(this.variables.indexOf(variable), 1)
182-
} else {
183-
try {
184-
const [identifier] = variable.split('.')
185-
window[identifier] = this.base.state.getState(identifier)
186-
this.base.state.addVariable(identifier, this.id)
187-
} catch (error) {
188-
console.error('Failed to initialize variable:', variable, error)
189-
}
190-
}
191-
})
92+
this.data.init()
19293
}
19394

19495
getGroup() {
@@ -271,15 +172,15 @@ export class Entity {
271172

272173
if (!entity) continue
273174

274-
variables.push(...entity.variables)
175+
variables.push(...entity.data.variables)
275176
entity.events.dispose()
276177
this.base.state.removeEntity(entity)
277178
}
278179

279180
// Clean up unused variables
280181
const usedVariables = entities
281182
.filter((entity) => !elements.includes(entity.element))
282-
.reduce((acc, entity) => acc.concat(entity.variables), [])
183+
.reduce((acc, entity) => acc.concat(entity.data.variables), [])
283184

284185
const unusedVariables = variables.filter(
285186
(variable) => !usedVariables.includes(variable)

0 commit comments

Comments
 (0)