this.setState({color2Pick: true})} />
762 | { this.state.color2Pick ?
763 |
this.setState({color2Pick: false})}/>
764 | this.setState({color2: c.hex})} />
765 |
: null }
766 |
767 |
768 |
769 |
770 | {this.state.menuIcon ? 
: null}
771 |
778 |
779 |
780 |
781 |
782 | {this.state.blockIcon ? 
: null}
783 |
790 |
791 |
792 |
793 |
794 |
{strings.generator}
795 |
796 |
797 |
798 |
799 |
800 |
{strings.addblock}
801 |
802 |
803 |
804 |
805 |
806 |
807 |
808 |
809 |
810 |
811 |
812 |
813 |
814 |
815 |
822 |
823 |
824 |
825 |
826 |
827 |
828 |
829 |
830 |
836 |
837 |
838 |
839 |
840 |
841 |
842 |
843 | {strings.uniqBlockName}
844 |
845 |
846 |
847 | Block ID
848 |
849 |
850 | this.setState({editBlockID: e.target.value})} />
851 |
852 |
853 | {strings.uniqBlockId}
854 |
855 |
856 |
857 | {this.state.genHeadScript ?
this.setState({genHeadScript: null})}
861 | /> : null}
862 | {this.state.blockScript ? this.setState({blockScript: null})}
865 | /> : null}
866 | {this.state.blockGenerator ? this.setState({blockGenerator: null})}
870 | /> : null}
871 | {this.state.isShowCodePreview ? this.setState({isShowCodePreview: false})}
874 | /> : null}
875 |
876 | );
877 | }
878 | }
879 |
880 | export default App;
881 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/src/BlockEditor.js:
--------------------------------------------------------------------------------
1 | import bindAll from 'lodash.bindall';
2 | import LocalizedStrings from 'react-localization';
3 | import { Modal, Tabs } from 'antd';
4 | import React, { Component } from 'react';
5 | import MonacoEditor from 'react-monaco-editor';
6 |
7 | const TabPane = Tabs.TabPane;
8 |
9 | class BlockScriptEditor extends Component {
10 | constructor (props){
11 | super(props);
12 | bindAll(this, [
13 | 'onChange',
14 | 'onApply'
15 | ])
16 | this.state = {
17 | script: this.props.blockScript.script
18 | };
19 | }
20 |
21 | onChange(newValue, e) {
22 | this.setState({
23 | script: newValue
24 | })
25 | }
26 | onApply (){
27 | this.props.blockScript.applyScript(this.state.script);
28 | this.props.onClose();
29 | }
30 | render (){
31 | const {
32 | onClose,
33 | blockScript,
34 | } = this.props;
35 |
36 | return (
43 |
51 | )
52 | }
53 | }
54 |
55 | class BlockGeneratorEditor extends Component {
56 | constructor (props){
57 | super(props);
58 | bindAll(this, [
59 | 'onChange',
60 | 'onApply',
61 | 'switchCode'
62 | ])
63 | this.state = {
64 | genCpp: this.props.gen.genCpp,
65 | genMpy: this.props.gen.genMpy,
66 | };
67 | }
68 |
69 | onChange(newValue, e) {
70 | this.setState({
71 | script: newValue
72 | })
73 | }
74 | onApply (){
75 | this.props.gen.applyGen({
76 | genCpp: this.state.genCpp,
77 | genMpy: this.state.genMpy
78 | });
79 | this.props.onClose();
80 | }
81 | switchCode (c){
82 |
83 | }
84 | render (){
85 | const {
86 | onClose,
87 | genOption,
88 | gen,
89 | } = this.props;
90 |
91 | return (
98 |
99 | {genOption.indexOf('arduino') > -1 ?
100 | this.setState({genCpp: code})}
107 | /> :null}
108 | {genOption.indexOf('micropython') > -1 ?
109 | this.setState({genMpy: code})}
116 | /> :null}
117 |
118 | )
119 | }
120 |
121 | }
122 |
123 |
124 | class CodePreview extends Component {
125 | constructor (props){
126 | super(props);
127 | bindAll(this, [
128 | 'onChange',
129 | 'downloadIndexjs'
130 | ])
131 | this.state = {
132 | script: this.props.code
133 | };
134 | }
135 |
136 | downloadIndexjs (){
137 | const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(this.state.script);
138 | const downloadAnchorNode = document.createElement('a');
139 | downloadAnchorNode.setAttribute("href", dataStr);
140 | downloadAnchorNode.setAttribute("download", "index.js");
141 | document.body.appendChild(downloadAnchorNode); // required for firefox
142 | downloadAnchorNode.click();
143 | downloadAnchorNode.remove();
144 | }
145 | onChange(newValue, e) {
146 | this.setState({
147 | script: newValue
148 | })
149 | }
150 | render (){
151 | const {
152 | code,
153 | onClose,
154 | } = this.props;
155 |
156 | return (
163 |
171 | )
172 | }
173 | }
174 |
175 |
176 |
177 | export {
178 | BlockScriptEditor,
179 | BlockGeneratorEditor,
180 | CodePreview
181 | }
--------------------------------------------------------------------------------
/src/CodeBuilder.js:
--------------------------------------------------------------------------------
1 |
2 | const BlockTypeMap = {
3 | func: "COMMAND",
4 | output: "REPORTER",
5 | bool: "BOOLEAN",
6 | hat: "HAT"
7 | }
8 |
9 | const buildEmptyHeadCpp = function (extID){
10 | return `cppComm(gen){
11 | gen.includes_['${extID}'] = '#include "YourHeader.h"';
12 | gen.definitions_['${extID}'] = 'YourClass object;';
13 | };`
14 | }
15 |
16 | const buildEmptyHeadMpy = function (extID){
17 | return `mpyComm(gen){
18 | gen.includes_['${extID}'] = 'import YourClass';
19 | };`
20 | }
21 |
22 | const buildBlockGenCpp = function (opcode, args){
23 | const code = `${opcode}Cpp (gen, block){\n cppComm(gen);\n return gen.template2code(block, '${opcode}')\n}\n`
24 | return code;
25 | }
26 |
27 | const buildBlockGenMpy = function (opcode, args){
28 | const code = `${opcode}Cpp (gen, block){\n mpyComm(gen);\n return gen.template2code(block, '${opcode}')\n}\n`
29 | return code;
30 | }
31 |
32 | const buildBlockOp = function(opcode, args){
33 | const argDefine = args.reduce((sc, arg) => {
34 | return sc += ` const ${arg.placeholder} = args.${arg.placeholder};\n`
35 | }, "")
36 | const code = `${opcode} (args, util){\n${argDefine}\n return this.write(\`M0 \\n\`);\n}\n`
37 | return code;
38 | }
39 |
40 | const buildJsCode = function(opt, blocks){
41 | const blockFunctions = [];
42 | const blocksInfo = [];
43 |
44 | for (const block of blocks){
45 | let txt = block.msg;
46 | let argIndex = 1;
47 | const blockCode = {
48 | opcode: `'${block.opcode}'`,
49 | blockType: `BlockType.${BlockTypeMap[block.type]}`
50 | };
51 | if (block.type === 'hat'){
52 | blockCode.isEdgeActivated = false
53 | }
54 | if (block.args.length){
55 | blockCode.arguments = {};
56 | for (let n=0;n {
125 | if (parser){
126 | this.reporter = {
127 | parser,
128 | resolve
129 | }
130 | }
131 | this.session.write(data);
132 | })
133 | }
134 | }
135 |
136 | onmessage (data){
137 | const dataStr = this.decoder.decode(data);
138 | this.lineBuffer += dataStr;
139 | if (this.lineBuffer.indexOf('\\n') !== -1){
140 | const lines = this.lineBuffer.split('\\n');
141 | this.lineBuffer = lines.pop();
142 | for (const l of lines){
143 | if (this.reporter){
144 | const {parser, resolve} = this.reporter;
145 | resolve(parser(l));
146 | };
147 | }
148 | }
149 | }
150 |
151 | scan (){
152 | this.comm.getDeviceList().then(result => {
153 | this.runtime.emit(this.runtime.constructor.PERIPHERAL_LIST_UPDATE, result);
154 | });
155 | }
156 |
157 | getInfo (){
158 | return {
159 | id: '${opt.extID}',
160 | name: '${opt.extName}',
161 | color1: '${opt.color1}',
162 | color2: '${opt.color2}',
163 | menuIconURI: menuIconURI,
164 | blockIconURI: blockIconURI,
165 | blocks: ${blkInfoCode}
166 | }
167 | }
168 |
169 | ${blockFunctions.join('\n')}
170 | }
171 |
172 | module.exports = ${opt.className};
173 | `;
174 |
175 | return indexJS;
176 | }
177 |
178 |
179 |
180 | export {
181 | buildJsCode,
182 | buildBlockOp,
183 | buildBlockGenCpp,
184 | buildBlockGenMpy,
185 | buildEmptyHeadCpp,
186 | buildEmptyHeadMpy
187 | };
--------------------------------------------------------------------------------
/src/arduino.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KittenBot/scratch3-extension/51e0079ac70dc979f03105001e5e04268459b06e/src/arduino.png
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 | monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: http://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/micropy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KittenBot/scratch3-extension/51e0079ac70dc979f03105001e5e04268459b06e/src/micropy.png
--------------------------------------------------------------------------------
/src/python.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KittenBot/scratch3-extension/51e0079ac70dc979f03105001e5e04268459b06e/src/python.png
--------------------------------------------------------------------------------
/src/s3ext.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KittenBot/scratch3-extension/51e0079ac70dc979f03105001e5e04268459b06e/src/s3ext.png
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read http://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------