sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Switch from babel to typescript for initial ext conversion

Browse Source
This commit is contained in:
hensm
2019-02-25 14:34:27 +00:00
parent e4dffe0cce
commit b7571791e2
13 changed files with 217 additions and 1342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/package-lock.json generated
View File

@@ -2213,12 +2213,6 @@
"prelude-ls": "~1.1.2" "prelude-ls": "~1.1.2"
} }
}, },
"typescript": {
"version": "3.3.3333",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.3333.tgz",
"integrity": "sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==",
"dev": true
},
"uid2": { "uid2": {
"version": "0.0.3", "version": "0.0.3",
"resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz", "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz",

3
app/package.json
View File

@@ -25,8 +25,7 @@
"@types/mime-types": "^2.1.0", "@types/mime-types": "^2.1.0",
"@types/node": "^11.9.5", "@types/node": "^11.9.5",
"mustache": "^3.0.1", "mustache": "^3.0.1",
"pkg": "^4.3.5", "pkg": "^4.3.5"
"typescript": "^3.3.3333"
}, },
"optionalDependencies": { "optionalDependencies": {
"rage-edit": "^1.2.0" "rage-edit": "^1.2.0"

1208
ext/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
ext/package.json
View File

@@ -11,16 +11,12 @@
"start": "web-ext run -s ../dist/ext/" "start": "web-ext run -s ../dist/ext/"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.3.3", "@types/react": "^16.8.4",
"@babel/plugin-proposal-class-properties": "^7.3.3", "@types/react-dom": "^16.8.2",
"@babel/plugin-proposal-do-expressions": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.3.2",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.6.0", "copy-webpack-plugin": "^4.6.0",
"preact": "^8.4.2", "preact": "^8.4.2",
"preact-compat": "^3.18.4", "preact-compat": "^3.18.4",
"ts-loader": "^5.3.3",
"uuid": "^3.3.2", "uuid": "^3.3.2",
"web-ext": "^2.9.1", "web-ext": "^2.9.1",
"webpack": "^4.27.0", "webpack": "^4.27.0",

12
ext/src/lib/utils.js
View File

@@ -1,12 +1,12 @@
"use strict"; "use strict";
export function getNextEllipsis (ellipsis) { export function getNextEllipsis (ellipsis) {
return do { return {
if (ellipsis === "") "."; "": "."
else if (ellipsis === ".") ".."; , ".": ".."
else if (ellipsis === "..") "..."; , "..": "..."
else if (ellipsis === "...") ""; , "...": ""
}; }[ellipsis];
} }
export function getWindowCenteredProps (refWin, width, height) { export function getWindowCenteredProps (refWin, width, height) {

237
ext/src/options/Bridge.jsx
View File

@@ -60,31 +60,25 @@ const BridgeStats = (props) => (
<tr> <tr>
<th>{ _("optionsBridgeStatsCompatibility") }</th> <th>{ _("optionsBridgeStatsCompatibility") }</th>
<td> <td>
{ do { { props.info.isVersionCompatible
if (props.info.isVersionCompatible) { ? props.info.isVersionExact
if (props.info.isVersionExact) { ? _("optionsBridgeCompatible")
_("optionsBridgeCompatible") : _("optionsBridgeLikelyCompatible")
} else { : _("optionsBridgeIncompatible") }
_("optionsBridgeLikelyCompatible")
}
} else {
_("optionsBridgeIncompatible")
}
}}
</td> </td>
</tr> </tr>
<tr> <tr>
<th>{ _("optionsBridgeStatsRecommendedAction") }</th> <th>{ _("optionsBridgeStatsRecommendedAction") }</th>
<td> <td>
{ do { { // If older
if (props.info.isVersionOlder) { props.info.isVersionOlder
_("optionsBridgeOlderAction") ? _("optionsBridgeOlderAction")
} else if (props.info.isVersionNewer) { // else if newer
_("optionsBridgeNewerAction") : props.info.isVersionNewer
} else { ? _("optionsBridgeNewerAction")
_("optionsBridgeNoAction") // else
} : _("optionsBridgeNoAction")
}} }
</td> </td>
</tr> </tr>
</table> </table>
@@ -227,127 +221,110 @@ export default class Bridge extends Component {
} }
renderStatus () {
const infoClasses = `bridge__info ${this.props.info
? "bridge__info--found"
: "bridge__info--not-found"}`;
let statusIcon;
let statusTitle;
let statusText;
if (!this.props.info) {
statusIcon = "assets/icons8-cancel-120.png";
statusTitle = _("optionsBridgeNotFoundStatusTitle");
statusText = _("optionsBridgeNotFoundStatusText");
} else {
if (this.props.info.isVersionCompatible) {
statusIcon = "assets/icons8-ok-120.png";
statusTitle = _("optionsBridgeFoundStatusTitle";
} else {
statusIcon = "assets/icons8-warn-120.png";
statusTitle = _("optionsBridgeIssueStatusTitle");
}
}
return (
<div className={infoClasses}>
<div className="bridge__status">
<img className="bridge__status-icon"
width="60" height="60"
src={ statusIcon } />
<h2 className="bridge__status-title">
{ statusTitle }
</h2>
{ statusText &&
<p className="bridge__status-text">
{ statusText }
</p> }
</div>
{ this.props.info &&
<BridgeStats info={ this.props.info }/> }
</div>
);
}
render () { render () {
return ( return (
<div className="bridge"> <div className="bridge">
{ do { { this.props.loading
if (this.props.loading) { ? ( <div className="bridge__loading">
<div className="bridge__loading">
{ _("optionsBridgeLoading") } { _("optionsBridgeLoading") }
<progress></progress> <progress></progress>
</div> </div>
} else { : this.renderStatus() }
const infoClasses = `bridge__info ${this.props.info
? "bridge__info--found"
: "bridge__info--not-found"}`;
const [ statusIcon, statusTitle, statusText ] = do { { !this.props.loading &&
if (!this.props.info) { <div className="bridge__update-info">
[ "assets/icons8-cancel-120.png" { this.state.isUpdateAvailable
, _("optionsBridgeNotFoundStatusTitle") ? (
, _("optionsBridgeNotFoundStatusText") ] <div className="bridge__update">
} else { <p className="bridge__update-label">
if (this.props.info.isVersionCompatible) { { _("optionsBridgeUpdateAvailable") }
[ "assets/icons8-ok-120.png" </p>
, _("optionsBridgeFoundStatusTitle") ] <div className="bridge__update-options">
} else { { this.props.platform === "linux" &&
[ "assets/icons8-warn-120.png" <select className="bridge__update-package-type"
, _("optionsBridgeIssueStatusTitle") ] onChange={ this.onPackageTypeChange }
} value={ this.state.packageType }>
} <option value="" disabled selected>
}; { _("optionsBridgeUpdatePackageTypeSelect") }
</option>
<div className={infoClasses}> <option value="deb">
<div className="bridge__status"> { _("optionsBridgeUpdatePackageTypeDeb") }
<img className="bridge__status-icon" </option>
width="60" height="60" <option value="rpm">
src={ statusIcon } /> { _("optionsBridgeUpdatePackageTypeRpm") }
</option>
<h2 className="bridge__status-title"> </select> }
{ statusTitle } <button className="bridge__update-start"
</h2> onClick={ this.onUpdate }
disabled={ this.props.platform === "linux"
{ do { && !this.state.packageType }>
if (statusText) { { _("optionsBridgeUpdate") }
<p className="bridge__status-text"> </button>
{ statusText }
</p>
}
}}
</div>
{ do {
if (this.props.info) {
<BridgeStats info={ this.props.info }/>
}
}}
</div>
}
}}
{ do {
if (!this.props.loading) {
<div className="bridge__update-info">
{ do {
if (this.state.isUpdateAvailable) {
<div className="bridge__update">
<p className="bridge__update-label">
{ _("optionsBridgeUpdateAvailable") }
</p>
<div className="bridge__update-options">
{ do {
if (this.props.platform === "linux") {
<select className="bridge__update-package-type"
onChange={ this.onPackageTypeChange }
value={ this.state.packageType }>
<option value="" disabled selected>
{ _("optionsBridgeUpdatePackageTypeSelect") }
</option>
<option value="deb">
{ _("optionsBridgeUpdatePackageTypeDeb") }
</option>
<option value="rpm">
{ _("optionsBridgeUpdatePackageTypeRpm") }
</option>
</select>
}
}}
<button className="bridge__update-start"
onClick={ this.onUpdate }
disabled={ this.props.platform === "linux"
&& !this.state.packageType }>
{ _("optionsBridgeUpdate") }
</button>
</div>
</div> </div>
} else { </div>
<button className="bridge__update-check" ) : (
disabled={ this.state.isCheckingUpdates } <button className="bridge__update-check"
onClick={ this.onCheckUpdates }> disabled={ this.state.isCheckingUpdates }
onClick={ this.onCheckUpdates }>
{ do { { this.state.isCheckingUpdates
if (this.state.isCheckingUpdates) { ? _("optionsBridgeUpdateChecking"
_("optionsBridgeUpdateChecking" , getNextEllipsis(this.state.checkUpdatesEllipsis))
, getNextEllipsis(this.state.checkUpdatesEllipsis)); : _("optionsBridgeUpdateCheck") }
} else { </button>
_("optionsBridgeUpdateCheck"); )}
}
}}
</button>
}
}}
<div className="bridge--update-status"> <div className="bridge--update-status">
{ do { { this.state.updateStatus && !this.state.isUpdateAvailable
if (this.state.updateStatus && this.state.updateStatus }
&& !this.state.isUpdateAvailable) {
this.state.updateStatus;
}
}}
</div>
</div> </div>
} </div> }
}}
</div> </div>
); );
} }

12
ext/src/options/EditableList.jsx
View File

@@ -56,14 +56,13 @@ export default class EditableList extends Component {
return { return {
rawView: true rawView: true
, rawViewValue: [...currentState.items.values()].join("\n") , rawViewValue: Array.from(currentState.items.values()).join("\n")
}; };
}); });
} }
handleSaveRaw () { handleSaveRaw () {
this.setState(currentState => { this.setState(currentState => {
console.log(currentState.rawViewValue);
const newItems = currentState.rawViewValue.split("\n") const newItems = currentState.rawViewValue.split("\n")
.filter(item => item !== ""); .filter(item => item !== "");
@@ -137,15 +136,15 @@ export default class EditableList extends Component {
</button> </button>
</div> </div>
<hr /> <hr />
{ do { { this.state.rawView
if (this.state.rawView) { ? (
<textarea className="editable-list__raw-view" <textarea className="editable-list__raw-view"
rows={ items.length} rows={ items.length}
value={ this.state.rawViewValue} value={ this.state.rawViewValue}
onChange={ this.handleRawViewTextAreaChange } onChange={ this.handleRawViewTextAreaChange }
ref={ el => { this.rawViewTextArea = el }}> ref={ el => { this.rawViewTextArea = el }}>
</textarea> </textarea>
} else { ) : (
<ul className="editable-list__items"> <ul className="editable-list__items">
{ items.map((item, i) => { items.map((item, i) =>
<EditableListItem text={ item } <EditableListItem text={ item }
@@ -169,8 +168,7 @@ export default class EditableList extends Component {
</button> </button>
</div> </div>
</ul> </ul>
} )}
}}
</div> </div>
); );
} }

6
ext/src/options/index.jsx
View File

@@ -323,11 +323,7 @@ class App extends Component {
<div id="buttons"> <div id="buttons">
<div id="status-line"> <div id="status-line">
{ do { { this.state.hasSaved && _("optionsSaved") }
if (this.state.hasSaved) {
_("optionsSaved")
}
}}
</div> </div>
<button onClick={ this.handleReset }> <button onClick={ this.handleReset }>
{ _("optionsReset") } { _("optionsReset") }

23
ext/src/popup/index.jsx
View File

@@ -187,25 +187,18 @@ class Receiver extends Component {
{ `${this.props.receiver.address}:${this.props.receiver.port}` } { `${this.props.receiver.address}:${this.props.receiver.port}` }
</div> </div>
<div className="receiver-status"> <div className="receiver-status">
{ do { { this.props.receiver.currentApp &&
if (this.props.receiver.currentApp) { `- ${this.props.receiver.currentApp}` }
`- ${this.props.receiver.currentApp}`
}
}}
</div> </div>
<button className="receiver-connect" <button className="receiver-connect"
onClick={this.onClick.bind(this)} onClick={this.onClick.bind(this)}
disabled={this.props.isLoading}> disabled={this.props.isLoading}>
{ do { { this.state.isLoading
if (this.state.isLoading) { ? _("popupCastingButtonLabel") +
_("popupCastingButtonLabel") + (this.state.isLoading
(this.state.isLoading ? this.state.ellipsis
? this.state.ellipsis : "")
: "" ) : _("popupCastButtonLabel") }
} else {
_("popupCastButtonLabel")
}
}}
</button> </button>
</li> </li>
); );

14
ext/tsconfig.json Normal file
View File

@@ -0,0 +1,14 @@
{
"compilerOptions": {
"allowJs": true
, "sourceMap": true
, "target": "es6"
, "noImplicitAny": true
, "esModuleInterop": true
, "moduleResolution": "node"
, "resolveJsonModule": true
, "removeComments": true
, "jsx": "react"
, "lib": [ "esnext", "dom" ]
}
}

21
ext/webpack.config.js
View File

@@ -21,7 +21,7 @@ module.exports = (env) => ({
} }
, output: { , output: {
filename: "[name].js" filename: "[name].js"
, path: `${env.outputPath}` , path: env.outputPath
} }
, plugins: [ , plugins: [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
@@ -65,23 +65,14 @@ module.exports = (env) => ({
, module: { , module: {
rules: [ rules: [
{ {
test: /\.jsx?$/ test: /\.(js|ts)x?$/
, resolve: { , resolve: {
extensions: [ ".js", ".jsx" ] extensions: [ ".js", ".jsx"
, ".ts", ".tsx" ]
} }
, include: `${env.includePath}` , include: env.includePath
, use: { , use: {
loader: "babel-loader" loader: "ts-loader"
, options: {
presets: [
"@babel/preset-react"
]
, plugins: [
"@babel/proposal-class-properties"
, "@babel/proposal-do-expressions"
, "@babel/proposal-object-rest-spread"
]
}
} }
} }
] ]

6
package-lock.json generated
View File

@@ -450,6 +450,12 @@
"os-tmpdir": "~1.0.1" "os-tmpdir": "~1.0.1"
} }
}, },
"typescript": {
"version": "3.3.3333",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.3333.tgz",
"integrity": "sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==",
"dev": true
},
"universalify": { "universalify": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",

1
package.json
View File

@@ -20,6 +20,7 @@
"minimist": "^1.2.0", "minimist": "^1.2.0",
"selenium-webdriver": "^4.0.0-alpha.1", "selenium-webdriver": "^4.0.0-alpha.1",
"semver": "^5.6.0", "semver": "^5.6.0",
"typescript": "^3.3.3333",
"ws": "^6.1.2" "ws": "^6.1.2"
} }
} }