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
Appearance settings

Commit 02033e4

Browse filesBrowse files
ViktorKukurbaViktorKukurba
committed
Added use of sample-data repo for playground examples
1 parent c8cc2d1 commit 02033e4
Copy full SHA for 02033e4

File tree

Expand file treeCollapse file tree

4 files changed

+125
-198
lines changed
Filter options
Expand file treeCollapse file tree

4 files changed

+125
-198
lines changed

‎website/src/components/ExamplesList.js

Copy file name to clipboardExpand all lines: website/src/components/ExamplesList.js
+12-190Lines changed: 12 additions & 190 deletions
Original file line numberDiff line numberDiff line change
@@ -1,208 +1,30 @@
11
import React from 'react';
22
import styles from './styles.module.css';
33

4+
const REPO_URL = 'https://raw.githubusercontent.com/FalconSoft/sample-data/master/jspython';
5+
46
class ExampleList extends React.Component {
57
constructor(props) {
68
super(props);
79
this.state = {
810
mobileMenu: false,
911
activeGroup: null,
1012
activeCode: null,
11-
examles: [{
12-
group: 'Basic',
13-
list: [{
14-
name: 'Working with Objects',
15-
code: `
16-
# create object
17-
x = {}
18-
x.someProp = 55
19-
x1 = {prop: x}
20-
dateObj = {
21-
currentYear: dateTime().getFullYear(),
22-
currentMonth: dateTime().getMonth() + 1,
23-
currentDate: dateTime().getDate(),
24-
currentTime: dateTime()
25-
}
26-
27-
# JavaScript Object works here very well
28-
x1.allKeys = Object.keys(dateObj)
29-
30-
x1["dynamicObject_" + dateTime().getMinutes()] = "This is dynamic object"
31-
32-
# merges two objects
33-
Object.assign(dateObj, x1)
34-
35-
`.trim()
36-
},
37-
{
38-
name: 'Working with Arrays',
39-
code: `
40-
nums = [1, 2, 3, 4, 5]
41-
42-
""" All standard JavaScript functions work here """
43-
44-
nums.push(6)
45-
nums.push(nums.pop() + 10)
46-
47-
48-
y = nums.map((r, i) =>
49-
newItem = {
50-
element: r,
51-
index: i,
52-
square: Math.pow(i, 2),
53-
cube: Math.pow(i, 3)
54-
}
55-
return newItem
56-
)
57-
.filter(r => r.cube > 5)
58-
return y
59-
`.trim()
60-
},
61-
{
62-
name: 'Working with Math',
63-
code: `
64-
""" All JavaScript Math functionas are working fine here """
65-
{
66-
sqrt: Math.sqrt(4),
67-
floor: Math.floor(5.6),
68-
ceil: Math.ceil(5.6),
69-
min: Math.min(4, 2, 5, 8),
70-
max: Math.max(4, 2, 5, 8)
71-
}
72-
`.trim()
73-
},
74-
{
75-
name: 'Working with strings',
76-
code: `
77-
text = """
78-
You can call any
79-
JavaScript function
80-
even with " or '
81-
"""
82-
s = text + "Test "
83-
s2 = s.replace("call", "invoke") + " 2 " + dateTime()
84-
s2.trim()
85-
`.trim()
86-
},
87-
{
88-
name: 'Working with dates',
89-
code: `
90-
"""
91-
returns a number of dates from new year
92-
"""
93-
today = dateTime() # now
94-
firstDate = dateTime(today.getFullYear() + "-01-01") # a first date of the current year
95-
diffTime = today - firstDate
96-
97-
# number of days from the begining of year
98-
Math.ceil(diffTime / 86400000)
99-
`.trim()
100-
}]
101-
}, {
102-
group: 'Example group 2',
103-
list: [
104-
{
105-
name: 'Null Conditioning',
106-
code: `
107-
108-
109-
myObj = {}
110-
111-
# this feature is not available in a classic Python,
112-
# but it is very usefull and popular with other languages
113-
myObj?.property?.subProperty or "N/A"
114-
`.trim()
115-
},
116-
{
117-
name: 'while loop',
118-
code: `
119-
i = 0
120-
a = [] # array
121-
while i < 6:
122-
i = i + 1
123-
124-
if i % 2 == 0:
125-
continue
126-
a.push(i * i)
127-
128-
return a
129-
`.trim()
130-
},
131-
{
132-
name: 'for loop',
133-
code: `
134-
numbers = [2, 6, 8, 0, -1]
135-
result = []
136-
137-
for x in numbers:
138-
result.push(x * 2)
139-
140-
# return only numbers greater than 5
141-
result.filter(r => r > 5)
142-
`.trim()
143-
},
144-
{
145-
name: 'Functions',
146-
code: `
147-
def add(a, b):
148-
return a + b
149-
"""
150-
It is optional to specify 'return'
151-
If no return specified, then it will return last statement
152-
"""
153-
def minus(a, b):
154-
a - b
155-
156-
# returns object what has two values
157-
{
158-
name: "Examples",
159-
add: add(2, 3),
160-
substract: minus(10, 5)
161-
}
162-
`
163-
},
164-
{
165-
name: 'Arrow functions',
166-
code: `
167-
nums = range(20)
168-
169-
"""
170-
Here is example of multi line and single line arrow functions
171-
"""
172-
y = nums
173-
.map((r, i) =>
174-
newItem = {
175-
element: r,
176-
index: i,
177-
square: Math.pow(i, 2),
178-
cube: Math.pow(i, 3)
13+
examles: []
17914
}
180-
return newItem
181-
)
182-
.filter(r => r.cube > 5)
183-
184-
return y
185-
`.trim()
186-
},
187-
{
188-
name: 'Recursive function',
189-
code: `
190-
def power(base, exponent):
191-
if exponent == 0:
192-
return 1
193-
else:
194-
return base * power(base, exponent - 1)
15+
}
19516

196-
"5 ** 10 = " + power(5, 10) + " == " + Math.pow(5, 10)
197-
`
198-
}]
199-
}]
200-
}
17+
componentDidMount() {
18+
fetch(`${REPO_URL}/index.json`).then(res => res.json()).then(examles => {
19+
this.setState({examles})
20+
})
20121
}
202-
selectExample(group, example) {
22+
23+
async selectExample(group, example) {
20324
this.state.activeCode = example.name;
20425
this.state.activeGroup = group;
205-
this.props.selectCode(example.code);
26+
const code = await fetch(`${REPO_URL}/${example.code}`).then(res => res.text());
27+
this.props.selectCode(code);
20628
}
20729

20830
toggleGroup(e) {

‎website/src/components/JSPythonEditor.js

Copy file name to clipboardExpand all lines: website/src/components/JSPythonEditor.js
-1Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import AceEditor from "react-ace";
3-
import '../../../src/assets/mode-jspython';
43
import 'ace-builds/src-noconflict/theme-github';
54
import 'ace-builds/src-noconflict/theme-tomorrow_night';
65

‎website/src/pages/playground.js

Copy file name to clipboardExpand all lines: website/src/pages/playground.js
+27-7Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,19 @@ import dynamic from 'next/dynamic';
22
import Layout from '@theme/Layout';
33
import React from 'react';
44
import ExampleList from '../components/ExamplesList';
5-
import styles from './styles.module.css';
5+
import styles from './playground.module.css';
66

7-
const INTERPRETER_CDN_URL = 'https://cdn.jsdelivr.net/npm/jspython-interpreter/dist/jspython-interpreter.min.js'
7+
const INTERPRETER_CDN_URL = 'https://cdn.jsdelivr.net/npm/jspython-interpreter/dist/jspython-interpreter.min.js';
8+
const JSPYTHON_MODE_URL = 'https://cdn.jsdelivr.net/npm/jspython-interpreter/dist/assets/mode-jspython.js';
9+
const ONLINE_EDITOR_URL = 'https://run.worksheet.systems/rest-client/jspython-editor';
10+
const EXTENSION_URL = 'https://chrome.google.com/webstore/detail/worksheets-rest-client/bjaifffdmbokgicfacjmhdkdonpmbkbd';
811

912
/**
1013
* Load component dynamic due to server side rendering and ace editor's requirement of existing window object.
1114
*/
1215
const JSPythonEditor = dynamic(
1316
() => import('../components/JSPythonEditor.js').then(async (component) => {
17+
await loadScript(JSPYTHON_MODE_URL);
1418
const langTools = await import('ace-builds/src-min-noconflict/ext-language_tools');
1519
const interp = await getInterpreter();
1620
addInterpretersCompleter(langTools, interp);
@@ -19,6 +23,7 @@ const JSPythonEditor = dynamic(
1923
{ ssr: false }
2024
)
2125

26+
2227
/**
2328
* Adds interpreters language completer.
2429
* @param {Object} langTools Ace editor language tools.
@@ -50,12 +55,27 @@ function getInterpreter() {
5055
if (interpreter) {
5156
return Promise.resolve(interpreter);
5257
}
58+
return loadScript(INTERPRETER_CDN_URL, () => {
59+
interpreter = window.jspython.jsPython();
60+
return interpreter;
61+
});
62+
}
63+
64+
/**
65+
* Loads script.
66+
* @param {string} url Url to load script
67+
* @param {Function?} callback Onload callback
68+
*/
69+
function loadScript(url, callback) {
5370
return new Promise((resolve, reject) => {
5471
const script = document.createElement('script');
55-
script.src = `${INTERPRETER_CDN_URL}?v=${Date.now()}`;
72+
script.src = `${url}?v=${Date.now()}`;
5673
script.onload = () => {
57-
interpreter = window.jspython.jsPython();
58-
resolve(interpreter);
74+
if (typeof callback === 'function') {
75+
resolve(callback());
76+
} else {
77+
resolve();
78+
}
5979
}
6080
document.head.appendChild(script);
6181
});
@@ -137,8 +157,8 @@ class Playground extends React.Component {
137157
<div className={styles.playgroundPageHeader}>
138158
<h1>JSPython playground</h1>
139159
<p>Write custom code, use and edit examples. For more advanced experience
140-
use <a href="https://run.worksheet.systems/rest-client/jspython-editor" target="_blank">Worksheets JSPython Editor</a>&nbsp;or&nbsp;
141-
<a href="https://chrome.google.com/webstore/detail/worksheets-rest-client/bjaifffdmbokgicfacjmhdkdonpmbkbd">Chrome Extensions</a>
160+
use <a href={ONLINE_EDITOR_URL} target="_blank">Worksheets JSPython Editor</a>&nbsp;or&nbsp;
161+
<a href={EXTENSION_URL} target="_blank">Chrome Extensions</a>
142162
</p>
143163
</div>
144164
<div className={styles.editorWrapper}>

‎website/src/pages/playground.module.css

Copy file name to clipboard
+86Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/**
2+
* Copyright (c) 2017-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
/**
9+
* CSS files with the .module.css suffix will be treated as CSS modules
10+
* and scoped locally.
11+
*/
12+
13+
.featureImage {
14+
height: 200px;
15+
width: 200px;
16+
}
17+
18+
.editorWrapper {
19+
display: flex;
20+
width: 100%;
21+
justify-content: space-between;
22+
height: 100%;
23+
padding-bottom: 1rem;
24+
}
25+
26+
.editorBlock {
27+
display: flex;
28+
flex-direction: column;
29+
height: 100%;
30+
width: 50%;
31+
}
32+
33+
.playgroundPage {
34+
flex-direction: row;
35+
display: flex;
36+
height: 100%;
37+
}
38+
39+
.playgroundContent {
40+
display: flex;
41+
height: 100%;
42+
flex-direction: column;
43+
max-width: 100%;
44+
}
45+
46+
.playgroundPageHeader {
47+
padding-top: 1rem;
48+
text-align: center;
49+
}
50+
51+
.runBtn {
52+
float: right;
53+
margin-top: .5rem;
54+
}
55+
56+
@media screen and (max-width: 760px) {
57+
.editorWrapper {
58+
flex-direction: column;
59+
}
60+
61+
.editorBlock {
62+
width: 100%;
63+
}
64+
65+
.playgroundPage {
66+
flex-wrap: wrap;
67+
}
68+
69+
.playgroundPage h1 {
70+
font-size: 1.5rem;
71+
margin-bottom: 0;
72+
}
73+
74+
.playgroundPageHeader {
75+
padding-top: .2rem;
76+
}
77+
78+
.playgroundPageHeader > h1, p {
79+
margin-bottom: .2rem;
80+
}
81+
82+
.runBtn {
83+
margin-top: 0;
84+
margin-bottom: .25rem;
85+
}
86+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.