mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

remove uneeded

Browse Source
pull/1898/head
yann300 3 years ago
parent afca2c5690
commit 1f2918786a
6 changed files with 2 additions and 464 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 153
      apps/remix-ide/best-practices.md
  2. 4
      apps/remix-ide/docs/code_contribution_guide.md
  3. 3
      apps/remix-ide/src/app/components/vertical-icons.js
  4. 8
      apps/remix-ide/src/app/ui/svgLogo.js
  5. 145
      apps/remix-ide/src/lib/remixd.js
  6. 153
      best-practices.md

153
apps/remix-ide/best-practices.md
Unescape View File

@ -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`
<div class=${css.userCard}>
<h1> @${self.state._nickname} </h1>
<h2> Welcome, ${self.state.title || ''} ${self.state.name || 'anonymous'} ${self.state.surname} </h2>
<ul> <li> User Funds: $${self.state._funds} </li> </ul>
<ul> <li> Spent Funds: $${self.state.totalSpend} </li> </ul>
<button class=${css.clearFunds} onclick=${e=>self._spendAll.call(self, e)}> spend all funds </button>
</div>
`
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)
```

4
apps/remix-ide/docs/code_contribution_guide.md
Unescape View File

@ -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 You can do that by opening issues, giving feedback or by contributing a pull request
to our codebase. to our codebase.
The Remix application is built with JavaScript and it doesn't use any framework. We only The Remix application is built with JavaScript and React.
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. 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). To learn more, please visit our [GitHub page](https://github.com/ethereum/remix-ide).

3
apps/remix-ide/src/app/components/vertical-icons.js
Unescape View File

@ -1,12 +1,9 @@
import * as packageJson from '../../../../../package.json' import * as packageJson from '../../../../../package.json'
// eslint-disable-next-line no-unused-vars
import { basicLogo } from '../ui/svgLogo'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import React from 'react' // eslint-disable-line import React from 'react' // eslint-disable-line
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel' import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
import Registry from '../state/registry' import Registry from '../state/registry'
// var helper = require('../../lib/helper')
const { Plugin } = require('@remixproject/engine') const { Plugin } = require('@remixproject/engine')
const EventEmitter = require('events') const EventEmitter = require('events')

8
apps/remix-ide/src/app/ui/svgLogo.js
Unescape View File

@ -1,8 +0,0 @@
import yo from 'yo-yo'
export function basicLogo () {
return yo`<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/>
<path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/>
<path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/>
</svg>`
}

145
apps/remix-ide/src/lib/remixd.js
Unescape View File

@ -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`<div>Connection to Remixd closed. Localhost connection not available anymore.</div>`
}
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

153
best-practices.md
Unescape View File

@ -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`
<div class=${css.userCard}>
<h1> @${self.state._nickname} </h1>
<h2> Welcome, ${self.state.title || ''} ${self.state.name || 'anonymous'} ${self.state.surname} </h2>
<ul> <li> User Funds: $${self.state._funds} </li> </ul>
<ul> <li> Spent Funds: $${self.state.totalSpend} </li> </ul>
<button class=${css.clearFunds} onclick=${e=>self._spendAll.call(self, e)}> spend all funds </button>
</div>
`
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)
```
Write Preview
Loading…
Cancel
Save