From 1f2918786a02552b01571403e6c7b9afc0804421 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 6 Jan 2022 20:55:35 +0100 Subject: [PATCH] remove uneeded --- apps/remix-ide/best-practices.md | 153 ------------------ .../remix-ide/docs/code_contribution_guide.md | 4 +- .../src/app/components/vertical-icons.js | 3 - apps/remix-ide/src/app/ui/svgLogo.js | 8 - apps/remix-ide/src/lib/remixd.js | 145 ----------------- best-practices.md | 153 ------------------ 6 files changed, 2 insertions(+), 464 deletions(-) delete mode 100644 apps/remix-ide/best-practices.md delete mode 100644 apps/remix-ide/src/app/ui/svgLogo.js delete mode 100644 apps/remix-ide/src/lib/remixd.js delete mode 100644 best-practices.md diff --git a/apps/remix-ide/best-practices.md b/apps/remix-ide/best-practices.md deleted file mode 100644 index 915759a054..0000000000 --- a/apps/remix-ide/best-practices.md +++ /dev/null @@ -1,153 +0,0 @@ -# Current "Best Practice" Conventions - - -- Please use [JS Standard Style](https://standardjs.com/) as a coding style guide. -- `ES6 class` rather than ES5 to create class. -- CSS declaration using `csjs-inject`. -- CSS files: - -  **if** the CSS section of an UI component is too important, CSS declarations should be put in a different file and in a different folder. - - The folder should be named `styles` and the file should be named with the extension `-styles.css`. - -  e.g: `file-explorer.js` being an UI component `file-explorer-styles.css` is created in the `styles` folder right under `file-explorer.js` - - **if** the CSS section of an UI component is rather limited it is preferable to put it in the corresponding JS file. - -- HTML declaration using `yo-yo`. - -- A module trigger events using `event` property: -  `self.event = new EventManager()`. - Events can then be triggered: -  `self.event.trigger('eventName', [param1, param2])` -- `self._view` is the HTML view renderered by `yo-yo` in the `render` function. -- `render()` this function should be called at the first rendering (make sure that the returned node element is put on the DOM), and should *not* by called again from outside the component. -- `update()` call this function to update the DOM when the state of the component has changed (this function must be called after the initial call to `render()`). -- for all functions / properties, prefixing by underscore (`_`) means the scope is private, and they should **not** be accessed not changed from outside the component. -- constructor arguments: There is no fixed rule whether it is preferrable to use multiples arguments or a single option *{}* argument (or both). - We recommend: - - use a specific slot for **obligatory** arguments and/or for complex arguments (meaning not boolean, not string, etc...). - - put arguments in an option *{}* for non critical and for optionnal arguments. - - if a component has more than 4/5 parameters, it is recommended to find a way to group some in one or more *opt* arguments. - -- look them up, discuss them, update them. -     -## Module Definition (example) -```js -// user-card.js -var yo = require('yo-yo') -var csjs = require('csjs-inject') -var EventManager = require('remix-lib').EventManager - -var css = csjs` - .userCard { - position : relative; - box-sizing : border-box; - display : flex; - flex-direction : column; - align-items : center; - border : 1px solid black; - width : 400px; - padding : 50px; - } - .clearFunds { background-color: lightblue; } -` - -class UserCard { - constructor (api, events, opts = {}) { - var self = this - - self.event = new EventManager() - self.opts = opts - self._api = api - self._consumedEvents = events - self._view = undefined - - events.funds.register('fundsChanged', function (amount) { - if (amount < self.state._funds) self.state.totalSpend += self.state._funds - amount - self.state._funds = amount - self.render() - }) - self.event.trigger('eventName', [param1, param2]) - } - render () { - var self = this - var view = yo` -
-

@${self.state._nickname}

-

Welcome, ${self.state.title || ''} ${self.state.name || 'anonymous'} ${self.state.surname}

- - - -
- ` - if (!self._view) { - self._view = view - } - return self._view - } - update () { - yo.update(this._view, this.render()) - } - setNickname (name) { - this._nickname = name - } - getNickname () { - var self = this - return `@${self.state._nickname}` - } - getFullName () { - var self = this - return `${self.state.title} ${self.state.name} ${self.state.surname}` - } - _spendAll (event) { - var self = this - self._appAPI.clearUserFunds() - } - _constraint (msg) { throw new Error(msg) } -} - -module.exports = UserCard -``` -## Module Usage (example) -```js -/*****************************************************************************/ -// 1. SETUP CONTEXT -var EventManager = require('remix-lib').EventManager -var funds = { event: new EventManager() } -var userfunds = 15 -function getUserFunds () { return userfunds } -function clearUserFunds () { - var spent = userfunds - userfunds = 0 - console.log(`all funds of ${usercard.getFullName()} were spent.`) - funds.event.trigger('fundsChanged', [userfunds]) - return spent -} -setInterval(function () { - userfunds++ - funds.event.trigger('fundsChanged', [userfunds]) -}, 100) - -/*****************************************************************************/ -// 2. EXAMPLE USAGE -var UserCard = require('./user-card') - -var usercard = new UserCard( - { getUserFunds, clearUserFunds }, - { funds: funds.event }, - { - title: 'Dr.', - name: 'John', - surname: 'Doe', - nickname: 'johndoe99' - }) - -var el = usercard.render() -document.body.appendChild(el) -setTimeout(function () { - userCard.setNickname('new name') - usercard.update() -}, 5000) - -``` diff --git a/apps/remix-ide/docs/code_contribution_guide.md b/apps/remix-ide/docs/code_contribution_guide.md index 6db3d1294c..5553b87c21 100644 --- a/apps/remix-ide/docs/code_contribution_guide.md +++ b/apps/remix-ide/docs/code_contribution_guide.md @@ -5,7 +5,7 @@ Remix is an open source tool and we encourage anyone to help us improve our tool You can do that by opening issues, giving feedback or by contributing a pull request to our codebase. -The Remix application is built with JavaScript and it doesn't use any framework. We only -rely on selected set of npm modules, like `yo-yo`, `csjs-inject` and others. Check out the `package.json` files in the Remix submodules to learn more about the stack. +The Remix application is built with JavaScript and React. +Check out the `package.json` files in the Remix submodules to learn more about the stack. To learn more, please visit our [GitHub page](https://github.com/ethereum/remix-ide). diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js index 69f6132939..3c86123bb6 100644 --- a/apps/remix-ide/src/app/components/vertical-icons.js +++ b/apps/remix-ide/src/app/components/vertical-icons.js @@ -1,12 +1,9 @@ import * as packageJson from '../../../../../package.json' -// eslint-disable-next-line no-unused-vars -import { basicLogo } from '../ui/svgLogo' import ReactDOM from 'react-dom' import React from 'react' // eslint-disable-line // eslint-disable-next-line no-unused-vars import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel' import Registry from '../state/registry' -// var helper = require('../../lib/helper') const { Plugin } = require('@remixproject/engine') const EventEmitter = require('events') diff --git a/apps/remix-ide/src/app/ui/svgLogo.js b/apps/remix-ide/src/app/ui/svgLogo.js deleted file mode 100644 index 3f8513151a..0000000000 --- a/apps/remix-ide/src/app/ui/svgLogo.js +++ /dev/null @@ -1,8 +0,0 @@ -import yo from 'yo-yo' -export function basicLogo () { - return yo` - - - -` -} diff --git a/apps/remix-ide/src/lib/remixd.js b/apps/remix-ide/src/lib/remixd.js deleted file mode 100644 index 2555ccef0b..0000000000 --- a/apps/remix-ide/src/lib/remixd.js +++ /dev/null @@ -1,145 +0,0 @@ -'use strict' -var EventManager = require('../lib/events') -var modalDialog = require('../app/ui/modaldialog') -var yo = require('yo-yo') - -class Remixd { - constructor (port) { - this.event = new EventManager() - this.port = port - this.callbacks = {} - this.callid = 0 - this.socket = null - this.connected = false - this.receiveResponse() - } - - online () { - return this.socket !== null - } - - close () { - if (this.socket) { - this.socket.close() - this.socket = null - } - } - - start (cb) { - if (this.socket) { - try { - this.socket.close() - } catch (e) {} - } - this.event.trigger('connecting', []) - this.socket = new WebSocket('ws://localhost:' + this.port, 'echo-protocol') // eslint-disable-line - - this.socket.addEventListener('open', (event) => { - this.connected = true - this.event.trigger('connected', [event]) - cb() - }) - - this.socket.addEventListener('message', (event) => { - var data = JSON.parse(event.data) - if (data.type === 'reply') { - if (this.callbacks[data.id]) { - this.callbacks[data.id](data.error, data.result) - delete this.callbacks[data.id] - } - this.event.trigger('replied', [data]) - } else if (data.type === 'notification') { - this.event.trigger('notified', [data]) - } else if (data.type === 'system') { - if (data.error) { - this.event.trigger('system', [{ - error: data.error - }]) - } - } - }) - - this.socket.addEventListener('error', (event) => { - this.errored(event) - cb(event) - }) - - this.socket.addEventListener('close', (event) => { - if (event.wasClean) { - this.connected = false - this.event.trigger('closed', [event]) - } else { - this.errored(event) - } - this.socket = null - }) - } - - async receiveResponse (requestId) { - return new Promise((resolve, reject) => { - this.event.register('replied', (data) => { - if (data.id === requestId) { - if (data.error) reject(data.error) - else resolve(data.result) - } - }) - }) - } - - errored (event) { - function remixdDialog () { - return yo`
Connection to Remixd closed. Localhost connection not available anymore.
` - } - if (this.connected) { - modalDialog('Lost connection to Remixd!', remixdDialog(), {}, { label: '' }) - } - this.connected = false - this.socket = null - this.event.trigger('errored', [event]) - } - - call (service, fn, args, callback) { - return new Promise((resolve, reject) => { - this.ensureSocket((error) => { - if (error) { - callback && typeof callback === 'function' && callback(error) - reject(error) - return - } - if (this.socket && this.socket.readyState === this.socket.OPEN) { - var data = this.format(service, fn, args) - this.callbacks[data.id] = callback - this.socket.send(JSON.stringify(data)) - resolve(data.id) - } else { - callback && typeof callback === 'function' && callback('Socket not ready. state:' + this.socket.readyState) - reject(new Error('Socket not ready. state:' + this.socket.readyState)) - } - }) - }) - } - - ensureSocket (cb) { - if (this.socket) return cb(null, this.socket) - this.start((error) => { - if (error) { - cb(error) - } else { - cb(null, this.socket) - } - }) - } - - format (service, fn, args) { - var data = { - id: this.callid, - service: service, - fn: fn, - args: args - } - this.callid++ - return data - } -} - -module.exports = Remixd diff --git a/best-practices.md b/best-practices.md deleted file mode 100644 index 3a21907978..0000000000 --- a/best-practices.md +++ /dev/null @@ -1,153 +0,0 @@ -# Current "Best Practice" Conventions - - -- Coding style is defined in [.eslintrc](https://github.com/ethereum/remix-project/blob/master/apps/remix-ide/.eslintrc). -- `ES6 class` rather than ES5 to create class. -- CSS declaration using `csjs-inject`. -- CSS files: - -  **if** the CSS section of an UI component is too important, CSS declarations should be put in a different file and in a different folder. - - The folder should be named `styles` and the file should be named with the extension `-styles.css`. - -  e.g: `file-explorer.js` being an UI component `file-explorer-styles.css` is created in the `styles` folder right under `file-explorer.js` - - **if** the CSS section of an UI component is rather limited it is preferable to put it in the corresponding JS file. - -- HTML declaration using `yo-yo`. - -- A module trigger events using `event` property: -  `self.event = new EventManager()`. - Events can then be triggered: -  `self.event.trigger('eventName', [param1, param2])` -- `self._view` is the HTML view renderered by `yo-yo` in the `render` function. -- `render()` this function should be called at the first rendering (make sure that the returned node element is put on the DOM), and should *not* by called again from outside the component. -- `update()` call this function to update the DOM when the state of the component has changed (this function must be called after the initial call to `render()`). -- for all functions / properties, prefixing by underscore (`_`) means the scope is private, and they should **not** be accessed not changed from outside the component. -- constructor arguments: There is no fixed rule whether it is preferrable to use multiples arguments or a single option *{}* argument (or both). - We recommend: - - use a specific slot for **obligatory** arguments and/or for complex arguments (meaning not boolean, not string, etc...). - - put arguments in an option *{}* for non critical and for optionnal arguments. - - if a component has more than 4/5 parameters, it is recommended to find a way to group some in one or more *opt* arguments. - -- look them up, discuss them, update them. -     -## Module Definition (example) -```js -// user-card.js -var yo = require('yo-yo') -var csjs = require('csjs-inject') -var EventManager = require('remix-lib').EventManager - -var css = csjs` - .userCard { - position : relative; - box-sizing : border-box; - display : flex; - flex-direction : column; - align-items : center; - border : 1px solid black; - width : 400px; - padding : 50px; - } - .clearFunds { background-color: lightblue; } -` - -class UserCard { - constructor (api, events, opts = {}) { - var self = this - - self.event = new EventManager() - self.opts = opts - self._api = api - self._consumedEvents = events - self._view = undefined - - events.funds.register('fundsChanged', function (amount) { - if (amount < self.state._funds) self.state.totalSpend += self.state._funds - amount - self.state._funds = amount - self.render() - }) - self.event.trigger('eventName', [param1, param2]) - } - render () { - var self = this - var view = yo` -
-

@${self.state._nickname}

-

Welcome, ${self.state.title || ''} ${self.state.name || 'anonymous'} ${self.state.surname}

- - - -
- ` - if (!self._view) { - self._view = view - } - return self._view - } - update () { - yo.update(this._view, this.render()) - } - setNickname (name) { - this._nickname = name - } - getNickname () { - var self = this - return `@${self.state._nickname}` - } - getFullName () { - var self = this - return `${self.state.title} ${self.state.name} ${self.state.surname}` - } - _spendAll (event) { - var self = this - self._appAPI.clearUserFunds() - } - _constraint (msg) { throw new Error(msg) } -} - -module.exports = UserCard -``` -## Module Usage (example) -```js -/*****************************************************************************/ -// 1. SETUP CONTEXT -var EventManager = require('remix-lib').EventManager -var funds = { event: new EventManager() } -var userfunds = 15 -function getUserFunds () { return userfunds } -function clearUserFunds () { - var spent = userfunds - userfunds = 0 - console.log(`all funds of ${usercard.getFullName()} were spent.`) - funds.event.trigger('fundsChanged', [userfunds]) - return spent -} -setInterval(function () { - userfunds++ - funds.event.trigger('fundsChanged', [userfunds]) -}, 100) - -/*****************************************************************************/ -// 2. EXAMPLE USAGE -var UserCard = require('./user-card') - -var usercard = new UserCard( - { getUserFunds, clearUserFunds }, - { funds: funds.event }, - { - title: 'Dr.', - name: 'John', - surname: 'Doe', - nickname: 'johndoe99' - }) - -var el = usercard.render() -document.body.appendChild(el) -setTimeout(function () { - userCard.setNickname('new name') - usercard.update() -}, 5000) - -```