Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit69b7e81

Browse files
committed
working react in vscode
1 parentaa1a8b8 commit69b7e81

File tree

10 files changed

+148
-55
lines changed

10 files changed

+148
-55
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"scripts": {
2727
"vscode:prepublish":"npm run build",
2828
"machine":"node ./out/state/index.js",
29-
"build":"npm run compile && npm run build:web",
30-
"build:web":"tsc -pweb-app/tsconfig.json && cp -R web-app/build/ build/",
29+
"build":"npm run compile",
30+
"build:web":"tsc -p tsconfig.web.json && cp -R web-app/build/ build/",
3131
"compile":"tsc -p ./",
3232
"watch":"tsc -watch -p ./",
3333
"postinstall":"node ./node_modules/vscode/bin/install",

‎src/editor/commands/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,8 @@ export default (context: vscode.ExtensionContext): void => {
2222
returnstart(context)
2323
},
2424
[COMMANDS.OPEN_WEBVIEW]:()=>{
25-
console.log('webview createOrShow')
2625
ReactPanel.createOrShow(context.extensionPath);
27-
}
26+
},
2827
// [COMMANDS.RUN_TEST]: runTest,
2928
// [COMMANDS.LOAD_SOLUTION]: loadSolution,
3029
// [COMMANDS.QUIT]: () => quit(context.subscriptions),

‎src/editor/views/createWebview.ts

Lines changed: 104 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,84 @@ import * as path from 'path'
55
importgetNoncefrom'./utils/nonce'
66
importonReceivefrom'./onReceive'
77

8+
constwebpackScript=`!(function (l) {
9+
function e(e) {
10+
for (var r, t, n = e[0], o = e[1], u = e[2], f = 0, i = []; f < n.length; f++)
11+
(t = n[f]), p[t] && i.push(p[t][0]), (p[t] = 0)
12+
for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r])
13+
for (s && s(e); i.length;) i.shift()()
14+
return c.push.apply(c, u || []), a()
15+
}
16+
function a() {
17+
for (var e, r = 0; r < c.length; r++) {
18+
for (var t = c[r], n = !0, o = 1; o < t.length; o++) {
19+
var u = t[o]
20+
0 !== p[u] && (n = !1)
21+
}
22+
n && (c.splice(r--, 1), (e = f((f.s = t[0]))))
23+
}
24+
return e
25+
}
26+
var t = {},
27+
p = { 1: 0 },
28+
c = []
29+
function f(e) {
30+
if (t[e]) return t[e].exports
31+
var r = (t[e] = { i: e, l: !1, exports: {} })
32+
return l[e].call(r.exports, r, r.exports, f), (r.l = !0), r.exports
33+
}
34+
; (f.m = l),
35+
(f.c = t),
36+
(f.d = function (e, r, t) {
37+
f.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t })
38+
}),
39+
(f.r = function (e) {
40+
'undefined' != typeof Symbol &&
41+
Symbol.toStringTag &&
42+
Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
43+
Object.defineProperty(e, '__esModule', { value: !0 })
44+
}),
45+
(f.t = function (r, e) {
46+
if ((1 & e && (r = f(r)), 8 & e)) return r
47+
if (4 & e && 'object' == typeof r && r && r.__esModule) return r
48+
var t = Object.create(null)
49+
if (
50+
(f.r(t), Object.defineProperty(t, 'default', { enumerable: !0, value: r }), 2 & e && 'string' != typeof r)
51+
)
52+
for (var n in r)
53+
f.d(
54+
t,
55+
n,
56+
function (e) {
57+
return r[e]
58+
}.bind(null, n),
59+
)
60+
return t
61+
}),
62+
(f.n = function (e) {
63+
var r =
64+
e && e.__esModule
65+
? function () {
66+
return e.default
67+
}
68+
: function () {
69+
return e
70+
}
71+
return f.d(r, 'a', r), r
72+
}),
73+
(f.o = function (e, r) {
74+
return Object.prototype.hasOwnProperty.call(e, r)
75+
}),
76+
(f.p = './')
77+
console.log('load window.wepbackJsonp')
78+
var r = (window.webpackJsonp = window.webpackJsonp || []),
79+
n = r.push.bind(r)
80+
; (r.push = e), (r = r.slice())
81+
for (var o = 0; o < r.length; o++) e(r[o])
82+
var s = n
83+
a()
84+
})([])`
85+
886
/**
987
* Manages React webview panels
1088
*/
@@ -19,7 +97,7 @@ class ReactPanel {
1997
private_disposables:vscode.Disposable[]=[]
2098

2199
publicstaticasynccreateOrShow(extensionPath:string):Promise<void>{
22-
consthasActiveEditor=vscode.window.activeTextEditor
100+
//const hasActiveEditor = vscode.window.activeTextEditor
23101

24102
// if (!hasActiveEditor) {
25103
// throw new Error('Should have an open file on launch')
@@ -29,6 +107,7 @@ class ReactPanel {
29107
// If we already have a panel, show it.
30108
// Otherwise, create a new panel.
31109
if(ReactPanel.currentPanel){
110+
console.log('--- HAS CURRENT PANEL ---')
32111
ReactPanel.currentPanel._panel.reveal(column)
33112
}else{
34113
ReactPanel.currentPanel=newReactPanel(extensionPath,column)
@@ -89,39 +168,51 @@ class ReactPanel {
89168
}
90169

91170
private_getHtmlForWebview():string{
171+
92172
// eslint-disable-next-line
93173
constmanifest=require(path.join(this._extensionPath,'build','asset-manifest.json'))
94-
constmainScript=manifest['main.js']
95-
constmainStyle=manifest['main.css']
174+
constmainScript=manifest.files['main.js']
175+
// grab first chunk
176+
constchunk=Object.keys(manifest.files).filter(f=>f.match(/^static\/js\/.+\.js$/))[0]
177+
constchunkScript=manifest.files[chunk]
178+
constmainStyle=manifest.files['main.css']
96179

97180
constscriptPathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainScript))
98181
constscriptUri=scriptPathOnDisk.with({scheme:'vscode-resource'})
182+
constchunkPathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',chunkScript))
183+
constchunkUri=chunkPathOnDisk.with({scheme:'vscode-resource'})
99184
conststylePathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainStyle))
100185
conststyleUri=stylePathOnDisk.with({scheme:'vscode-resource'})
101186

102187
// Use a nonce to whitelist which scripts can be run
103188
constnonce=getNonce()
189+
constnonce2=getNonce()
190+
constnonce3=getNonce()
104191

105-
return`<!DOCTYPE html>
192+
constoutput=`<!DOCTYPE html>
106193
<html lang="en">
107194
<head>
108195
<meta charset="utf-8">
109196
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
110-
<meta name="theme-color" content="#000000">
111-
<title>React App</title>
197+
<meta name="theme-color" content="#000000">
198+
<title>React App</title>
199+
<link rel="manifest" href="./manifest.json" />
112200
<link rel="stylesheet" type="text/css" href="${styleUri}">
113-
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';style-src vscode-resource: 'unsafe-inline' http: https: data:;">
114-
<base href="${vscode.Uri.file(path.join(this._extensionPath,'build')).with({scheme:'vscode-resource'})}/">
115-
<style></style>
201+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}' 'nonce-${nonce2}' 'nonce-${nonce3}';style-src vscode-resource: 'unsafe-inline' http: https: data:;">
202+
<base href="${vscode.Uri.file(path.join(this._extensionPath,'build')).with({scheme:'vscode-resource'})}/">
203+
<style></style>
116204
</head>
117205
118206
<body>
119207
<noscript>You need to enable JavaScript to run this app.</noscript>
120-
<div id="root">Loading...</div>
121-
122-
<script nonce="${nonce}" src="${scriptUri}"></script>
208+
<div id="root">Loading...</div>
209+
<script nonce=${nonce}>${webpackScript}</script>
210+
<script nonce=${nonce2} src="${chunkUri}"></script>
211+
<script nonce="${nonce3}" src="${scriptUri}"></script>
123212
</body>
124-
</html>`
213+
</html>`
214+
console.log(output)
215+
returnoutput
125216
}
126217
}
127218

‎web-app/.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
PUBLIC_URL=./

‎web-app/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name":"web-app",
2+
"name":"coderoad-app",
33
"version":"0.1.0",
44
"private":true,
55
"dependencies": {

‎web-app/public/index.html

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<!DOCTYPE html>
22
<htmllang="en">
3-
<head>
4-
<metacharset="utf-8"/>
5-
<linkrel="shortcut icon"href="%PUBLIC_URL%/favicon.ico"/>
6-
<metaname="viewport"content="width=device-width, initial-scale=1"/>
7-
<metaname="theme-color"content="#000000"/>
8-
<!--
9-
manifest.json provides metadata used when your web app isinstalled on a
10-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
3+
4+
<head>
5+
<metacharset="utf-8">
6+
<metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<metaname="theme-color"content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app isadded to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1111
-->
12-
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json"/>
13-
<!--
12+
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json">
13+
<linkrel="shortcut icon"href="%PUBLIC_URL%/favicon.ico">
14+
<!--
1415
Notice the use of %PUBLIC_URL% in the tags above.
1516
It will be replaced with the URL of the `public` folder during the build.
1617
Only files inside the `public` folder can be referenced from the HTML.
@@ -19,12 +20,15 @@
1920
work correctly both with client-side routing and a non-root public URL.
2021
Learn how to configure a non-root public URL by running `npm run build`.
2122
-->
22-
<title>React App</title>
23-
</head>
24-
<body>
25-
<noscript>You need to enable JavaScript to run this app.</noscript>
26-
<divid="root"></div>
27-
<!--
23+
<title>CodeRoad</title>
24+
</head>
25+
26+
<body>
27+
<noscript>
28+
You need to enable JavaScript to run this app.
29+
</noscript>
30+
<divid="root"></div>
31+
<!--
2832
This HTML file is a template.
2933
If you open it directly in the browser, you will see an empty page.
3034
@@ -34,5 +38,6 @@
3438
To begin the development, run `npm start` or `yarn start`.
3539
To create a production bundle, use `npm run build` or `yarn build`.
3640
-->
37-
</body>
38-
</html>
41+
</body>
42+
43+
</html>

‎web-app/public/manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name":"React App",
3-
"name":"Create React App Sample",
2+
"short_name":"CodeRoad",
3+
"name":"CodeRoad",
44
"icons": [
55
{
66
"src":"favicon.ico",

‎web-app/src/App.tsx

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
importReactfrom'react';
2-
importlogofrom'./logo.svg';
32
import'./App.css';
43

54
constApp:React.FC=()=>{
65
return(
76
<divclassName="App">
87
<headerclassName="App-header">
9-
<imgsrc={logo}className="App-logo"alt="logo"/>
10-
<p>
11-
Edit<code>src/App.tsx</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
8+
Hello World
219
</header>
2210
</div>
2311
);

‎web-app/src/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,4 @@ import ReactDOM from 'react-dom';
33
import'./index.css';
44
importAppfrom'./App';
55

6-
ReactDOM.render(<App/>,document.getElementById('root'));
7-
6+
ReactDOM.render(<App/>,document.getElementById('root')asHTMLElement)

‎web-app/tsconfig.json

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"target":"es5",
44
"lib": [
55
"dom",
6-
"dom.iterable",
76
"esnext"
87
],
98
"allowJs":true,
@@ -17,9 +16,20 @@
1716
"resolveJsonModule":true,
1817
"isolatedModules":true,
1918
"noEmit":true,
20-
"jsx":"preserve"
19+
"jsx":"preserve",
20+
"sourceMap":true,
21+
"rootDir":"src",
22+
"baseUrl":"src",
23+
"outDir":"build"
2124
},
2225
"include": [
2326
"src"
27+
],
28+
"exclude": [
29+
"node_modules",
30+
"build",
31+
"scripts",
32+
"jest",
33+
"public"
2434
]
2535
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp