-
Notifications
You must be signed in to change notification settings - Fork 0
/
annotations.txt
165 lines (150 loc) · 3.81 KB
/
annotations.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
https://web.dev/source-maps/
https://web.dev/source-maps/#understanding-the-source-map
https://evanw.github.io/source-map-visualization/
https://sokra.github.io/source-map-visualization/ (test on this)
https://umaar.com/dev-tips/96-resolve-variable-names/ (only on firefox)
https://sourcemaps.info/spec.html
# Script
node -v > .nvmrc
nvm use
npm init -y
type: module
"engines": {
"node": "18"
},
-> initial structure
mkdir src
src
processor
minifier
index
mkdir public
touch index.js
all
processor.js
run
console.log(fileName)
index.js
call processor.run
package.json
"clean": "rm -rf **/index.min*",
"minify": "npm run clean && node index.js public/index.js",
"minify-and-run": "npm run minify && npm run start",
"start": "node public/index.min.js"
npm i -g ntl
ntl -> minify
minifier.js
traverseAST(originalCode) {
console.log(originalCode)
}
processor
readfile
minifiedFilePath
minfifiedLocalPath
#generateMinifiedCode
const minifier = new Minifier();
minifier.traverseAST(originalCode);
acorn -> generate the AST
escodegen -> validate js code + remove spaces and breaklines
minifier.js
traverseAST
ast
console.log JSON.stringify(ast)
show structure
#traverse(node) {}
traverseAST
this.#traverse(ast);
// Generate the minified code
const minifiedCode = escodegen.generate(ast, { format: { compact: true, space: false } });
return {
minifiedCode,
};
processor
generateMinifiedCode
minifiedCodeAndNameMap
console.log({ minifiedCodeAndNameMap })
minifier
#nameMap = new Map();
// put all alphabet both upper and lower case in an array
#alphabet
#generateNameIfNotExists
#handleDeclaration(declaration)
// all
traverseAST
call #handleDeclaration({ name: Date.now()})
run -> should generate different names
updateNameMap
traverseAST
call updateNameMap
run -> should save items
touch ast-helper
all
comment VariableDeclaration
minifier
import ast-helper
traverse
all
run -> it should print minified code only on fnctions
ast-helper
uncomment VariableDeclaration
run -> it should print all minified code
traverseAST
return nameMap
processor
generateMinifiedCode
all
run -> it should generate minified file
touch index.html
all
run -> should run in the browser
-> pause announcement
show: https://web.dev/source-maps/#understanding-the-source-map
npm i [email protected]
touch sourcemapper.js
only signature
constructor({ minifiedLocalFilePath })
generateSourceMap({ originalCode, nameMap, minifiedCode }) {}
processor
run
generateSourceMap
generateSourceMap
const sourceMapper = new SourceMapper({
minifiedLocalFilePath,
});
const sourceMapContent = sourceMapper.generateSourceMap({
originalCode,
nameMap,
minifiedCode,
});
console.log()
sourcemapper.js
generateSourceMap
ast
> run should show minifiedcode ast
handleDeclaration
#traverse
generateSourceMap
traverse
console.log minifiedItems
> run should printout map
generateSourceMapData
all
generateSourceMap
return sourcemap
processor
console.log(sourceMapContent)
> should print sourcemapcontent
processor
writeFileSync
run
console.log
> should generate files
go to https://sokra.github.io/source-map-visualization/
and visualize files
> browser and check if the source map is working
> notice that variables are not being mapped
-> firefox -> check Map
-> debug code
change the name to profession to make sure strings wont conflict with text
END :)