feat: connect editor to ScCN backend and asset library
This commit is contained in:
26 files changed
+724
-184
No files matched your search
@@ -0,0 +1,69 @@
|
||||
# 中社后端接入
|
||||
|
||||
编辑器、播放器和嵌入页使用本站作品 ID。社区主站 `Frontend` 不在本次改动范围。
|
||||
|
||||
## 本地开发
|
||||
|
||||
1. 在 Backend 配置数据库并执行 `npm ci`、`npm run migrate`，确认迁移 008 已应用。
|
||||
2. Backend 的 `ALLOWED_ORIGINS` 加上 `http://localhost:8601`；保留已有主站 Origin。
|
||||
3. 在 Backend 执行 `npm run assets:import -- --gui ../scratch-gui`，再加 `--check` 校验素材完整。
|
||||
4. 启动 Backend（默认 3000），在本仓库执行 `npm ci` 和 `npm start`。
|
||||
如果安装时跳过了 lifecycle scripts，先执行 `npm run prepublish` 下载并校验 micro:bit 资源。
|
||||
5. 打开 `http://localhost:8601/editor.html`，点右上角“登录以保存”，使用后端已注册账号。
|
||||
本页面不创建账号，注册沿用主站。
|
||||
|
||||
开发构建默认 API 为 `http://localhost:3000/api`。可在启动或构建时用环境变量指定，例如：
|
||||
|
||||
```sh
|
||||
SCCN_API_BASE=https://api.example.com/api npm start
|
||||
SCCN_API_BASE=https://api.example.com/api NODE_ENV=production npm run build
|
||||
```
|
||||
|
||||
生产未指定时默认同源 `/api`，需反向代理到 Backend。API 地址不能由 URL 参数覆写。
|
||||
Cookie 请求始终携带 credentials；跨站部署需要后端启用 HTTPS、Secure、SameSite=None，
|
||||
并允许编辑器 Origin。浏览器限制第三方 Cookie 时优先部署同源反向代理。
|
||||
|
||||
## 使用流程
|
||||
|
||||
- 登录恢复后，编辑中的新作品自动建立私有草稿；修改后 30 秒自动保存。
|
||||
- 文件菜单“立即保存”或 Ctrl/Cmd+S 保存到服务器；未登录时仍可下载到本地。
|
||||
- “保存副本”把当前编辑状态保存为新 ID，不修改原作；版本冲突后也可用它保留修改。
|
||||
- 右上角“我的作品”分页列出自己的作品；切换时对未保存修改提示确认。
|
||||
- `editor.html#123` 打开作品 123；刷新后读取后端最新版本、标题和素材。
|
||||
- 保存本地导入或 `project_url` 导入的项目后，清除导入参数，刷新时使用本站副本。
|
||||
- 本地 `.sb3` 导入/导出、打包功能保留。默认角色、背景、库素材和字体也会首次上传到本站，
|
||||
不会误用 Scratch 的 `asset.clean` 标记跳过上传；当前页面成功上传过的素材不重复上传。
|
||||
- 素材库缩略图、角色全部造型、声音预览与添加统一读取本站；不再回退到 Scratch 官方素材站。
|
||||
- 后端未提供云变量服务，因此不接入 TurboWarp 公共云变量服务器，避免本站 ID 与官方 ID 混用。
|
||||
|
||||
## 保存与错误处理
|
||||
|
||||
保存使用与实际加载内容绑定的 revision。恢复登录、窗口重新获得焦点时刷新权限，
|
||||
不会替换本地 revision，因此不会把旧作品当作最新版本覆盖服务器。401 提示重新登录；
|
||||
409 保留编辑内容，提示下载备份或保存副本。私有作品未登录时显示登录与重新加载入口。
|
||||
上传或保存失败不会显示保存成功；保存期间继续修改的内容保持未保存状态。
|
||||
|
||||
后端保存后的缩略图由 VM 截图上传。标题修改同样标记作品已变更并参与保存。
|
||||
复制/改编的新作品默认私有；本次未增加发布/审核、删除、社区页面或注册流程。
|
||||
|
||||
## 验证
|
||||
|
||||
```sh
|
||||
npx jest --runInBand test/unit/sccn test/unit/reducers/project-state-reducer.test.js
|
||||
npm run test:unit
|
||||
npm run build
|
||||
```
|
||||
|
||||
接入与状态机 53 项测试、既有 addon 33 项测试通过。浏览器联调使用隔离 MySQL 9.7 数据库，
|
||||
验证登录/退出、新建、标题与快捷键保存、刷新恢复角色与背景、副本、我的作品、私有访问限制和
|
||||
并发冲突后另存副本。未使用业务库，未部署生产。
|
||||
|
||||
旧的 `test/unit/util/project-saver-hoc.test.jsx` 与 `project-fetcher-hoc.test.jsx` 不在默认测试脚本中：
|
||||
当前 Jest 配置缺 DOM 环境及 webpack inline-loader 映射，直接执行会失败；本轮未扩展该旧测试环境。
|
||||
|
||||
本次新增及其余改动源码 lint 通过；菜单文件仍有 24 项既存 lint 错误（HEAD 为 25 项），未做无关清理。
|
||||
|
||||
## 素材与生产部署
|
||||
|
||||
完整的素材导入、离线迁移、Nginx/systemd 配置、升级和备份步骤见 [Backend 部署说明](../../Backend/docs/07-editor-deployment.md)。
|
||||
首次部署必须先导入素材，再发布 GUI；本轮已导入 1,305 个素材并完成完整性校验。
|
||||
@@ -32,6 +32,7 @@ import FramerateChanger from '../../containers/tw-framerate-changer.jsx';
|
||||
import ChangeUsername from '../../containers/tw-change-username.jsx';
|
||||
import CloudVariablesToggler from '../../containers/tw-cloud-toggler.jsx';
|
||||
import TWSaveStatus from './tw-save-status.jsx';
|
||||
import Account from '../sccn-account/account.jsx';
|
||||
import TWNews from './tw-news.jsx';
|
||||
|
||||
import {openTipsLibrary, openSettingsModal, openRestorePointModal} from '../../reducers/modals';
|
||||
@@ -340,7 +341,11 @@ class MenuBar extends React.Component {
|
||||
const modifier = bowser.mac ? event.metaKey : event.ctrlKey;
|
||||
if (modifier) {
|
||||
if (event.key.toLowerCase() === 's') {
|
||||
this.props.handleSaveProject();
|
||||
if (this.props.canSave) {
|
||||
this.props.onClickSave();
|
||||
} else {
|
||||
this.props.handleSaveProject();
|
||||
}
|
||||
event.preventDefault();
|
||||
} else if (event.key.toLowerCase() === 'o') {
|
||||
event.preventDefault();
|
||||
@@ -1035,9 +1040,10 @@ class MenuBar extends React.Component {
|
||||
</div>
|
||||
|
||||
<div className={styles.accountInfoGroup}>
|
||||
<TWSaveStatus
|
||||
showSaveFilePicker={this.props.showSaveFilePicker}
|
||||
/>
|
||||
{this.props.canSave ? <SaveStatus /> : (
|
||||
<TWSaveStatus showSaveFilePicker={this.props.showSaveFilePicker} />
|
||||
)}
|
||||
<Account />
|
||||
</div>
|
||||
|
||||
{aboutButton}
|
||||
|
||||
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import {defineMessages, intlShape, injectIntl} from 'react-intl';
|
||||
import {setProjectTitle} from '../../reducers/project-title';
|
||||
import {setProjectChanged} from '../../reducers/project-changed';
|
||||
|
||||
import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
|
||||
import Input from '../forms/input.jsx';
|
||||
@@ -48,7 +49,10 @@ const mapStateToProps = state => ({
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onSubmit: title => dispatch(setProjectTitle(title))
|
||||
onSubmit: title => {
|
||||
dispatch(setProjectTitle(title));
|
||||
dispatch(setProjectChanged());
|
||||
}
|
||||
});
|
||||
|
||||
export default injectIntl(connect(
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
@import "../../css/colors.css";
|
||||
.account { display: flex; align-items: center; gap: .5rem; }
|
||||
.account button { cursor: pointer; border: 1px solid rgba(255,255,255,.5); border-radius: .35rem; padding: .45rem .65rem; color: inherit; background: transparent; font: inherit; }
|
||||
.account button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
|
||||
.modal { width: min(30rem, 95vw); margin: 6rem auto; }
|
||||
.content { padding: 1.25rem; color: $text-primary; background: $ui-primary; }
|
||||
.content form, .content label { display: flex; flex-direction: column; gap: .75rem; }
|
||||
.content label { margin-bottom: 1rem; }
|
||||
.content input { padding: .65rem; border: 1px solid $ui-black-transparent; border-radius: .3rem; }
|
||||
.content button { padding: .5rem .75rem; cursor: pointer; }
|
||||
.projects { list-style: none; padding: 0; max-height: 45vh; overflow: auto; }
|
||||
.projects button { width: 100%; text-align: left; margin-bottom: .5rem; overflow-wrap: anywhere; }
|
||||
.pagination { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
|
||||
.notice { position: fixed; top: 3.5rem; right: 1rem; max-width: min(34rem, 90vw); padding: 1rem; color: $text-primary; background: $ui-primary; border: 1px solid $ui-black-transparent; border-radius: .5rem; box-shadow: 0 4px 20px #0003; z-index: 10000; }
|
||||
@@ -0,0 +1,176 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import backend from '../../lib/sccn/api';
|
||||
import {setProjectId} from '../../reducers/project-state';
|
||||
import Modal from '../modal/modal.jsx';
|
||||
import styles from './account.css';
|
||||
|
||||
class Account extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {session: backend.state, panel: null, busy: false, items: [], page: 1, total: 0, error: ''};
|
||||
this.handleClose = () => this.setState({panel: null, error: ''});
|
||||
this.handleOpenLogin = () => this.setState({panel: 'login', error: ''});
|
||||
this.handleOpenProjects = () => this.loadProjects(1);
|
||||
this.handleLogin = this.handleLogin.bind(this);
|
||||
this.handleLogout = this.handleLogout.bind(this);
|
||||
}
|
||||
componentDidMount () {
|
||||
this.unsubscribe = backend.subscribe(session => this.setState({session}));
|
||||
}
|
||||
componentWillUnmount () {
|
||||
this.unsubscribe();
|
||||
}
|
||||
async handleLogin (event) {
|
||||
event.preventDefault();
|
||||
const fields = new FormData(event.currentTarget);
|
||||
this.setState({busy: true, error: ''});
|
||||
try {
|
||||
await backend.login(fields.get('email'), fields.get('password'));
|
||||
this.handleClose();
|
||||
} catch (error) {
|
||||
this.setState({error: error.message});
|
||||
} finally {
|
||||
this.setState({busy: false});
|
||||
}
|
||||
}
|
||||
async handleLogout () {
|
||||
this.setState({busy: true});
|
||||
try {
|
||||
await backend.logout();
|
||||
this.handleClose();
|
||||
} catch (error) {
|
||||
this.setState({error: error.message});
|
||||
} finally {
|
||||
this.setState({busy: false});
|
||||
}
|
||||
}
|
||||
async loadProjects (page) {
|
||||
this.setState({panel: 'projects', busy: true, error: ''});
|
||||
try {
|
||||
const data = await backend.request(`/projects?page=${page}&pageSize=10`);
|
||||
this.setState({items: data.items, total: data.total, page});
|
||||
} catch (error) {
|
||||
this.setState({error: error.message});
|
||||
} finally {
|
||||
this.setState({busy: false});
|
||||
}
|
||||
}
|
||||
openProject (id) {
|
||||
// Do not silently discard unsaved work when navigating from the project list.
|
||||
if (this.props.projectChanged &&
|
||||
!window.confirm('当前修改尚未保存，确定打开其他作品吗？')) return; // eslint-disable-line no-alert
|
||||
// An imported URL must not keep overriding the selected server project.
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete('project_url');
|
||||
url.searchParams.delete('project_title');
|
||||
history.replaceState(null, '', `${url.pathname}${url.search}${url.hash}`);
|
||||
this.props.openProject(String(id));
|
||||
this.handleClose();
|
||||
}
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
render () {
|
||||
const {session, panel, busy, items, page, total, error} = this.state;
|
||||
return (
|
||||
<div className={styles.account}>
|
||||
{session.user ? (
|
||||
<React.Fragment>
|
||||
<button
|
||||
type="button"
|
||||
onClick={this.handleOpenProjects}
|
||||
>{session.user.username}{' · 我的作品'}</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={this.handleLogout}
|
||||
>{'退出'}</button>
|
||||
</React.Fragment>
|
||||
) : <button
|
||||
type="button"
|
||||
onClick={this.handleOpenLogin}
|
||||
>{'登录以保存'}</button>}
|
||||
{session.error && !panel ? (
|
||||
<div
|
||||
role="alert"
|
||||
className={styles.notice}
|
||||
>
|
||||
{session.error.message}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => backend.update({error: null})}
|
||||
>{'关闭'}</button>
|
||||
</div>
|
||||
) : null}
|
||||
{panel ? (
|
||||
<Modal
|
||||
className={styles.modal}
|
||||
contentLabel={panel === 'login' ? '登录中社' : '我的作品'}
|
||||
id="sccn-account"
|
||||
onRequestClose={this.handleClose}
|
||||
>
|
||||
<div className={styles.content}>
|
||||
{error ? <p role="alert">{error}</p> : null}
|
||||
{panel === 'login' ? (
|
||||
<form onSubmit={this.handleLogin}>
|
||||
<label>{'邮箱'}<input
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="username"
|
||||
required
|
||||
/></label>
|
||||
<label>{'密码'}<input
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/></label>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
>{busy ? '正在登录…' : '登录'}</button>
|
||||
</form>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
{busy ? <p>{'正在读取作品…'}</p> : null}
|
||||
{!busy && !items.length ? <p>{'还没有保存的作品。'}</p> : null}
|
||||
<ul className={styles.projects}>
|
||||
{items.map(project => (
|
||||
<li key={project.id}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={() => this.openProject(project.id)}
|
||||
>
|
||||
{project.title}{' · '}
|
||||
{project.visibility === 'public' ? '公开' : '私有'}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className={styles.pagination}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy || page === 1}
|
||||
onClick={() => this.loadProjects(page - 1)}
|
||||
>{'上一页'}</button>
|
||||
<span>{`第 ${page} 页 · 共 ${total} 个作品`}</span>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy || page * 10 >= total}
|
||||
onClick={() => this.loadProjects(page + 1)}
|
||||
>{'下一页'}</button>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Account.propTypes = {projectChanged: PropTypes.bool, openProject: PropTypes.func};
|
||||
export default connect(state => ({projectChanged: state.scratchGui.projectChanged}), dispatch => ({
|
||||
openProject: id => dispatch(setProjectId(id))
|
||||
}))(Account);
|
||||
@@ -8,13 +8,13 @@ import {defaultProjectId} from '../../reducers/project-state';
|
||||
import styles from './project-input.css';
|
||||
import {setProjectId} from '../../lib/tw-navigation-utils';
|
||||
|
||||
const PROJECT_BASE = 'https://scratch.mit.edu/projects/';
|
||||
const PROJECT_BASE = '';
|
||||
|
||||
const messages = defineMessages({
|
||||
tooltip: {
|
||||
defaultMessage: 'Copy and paste a Scratch project link here!',
|
||||
defaultMessage: '输入中社作品编号',
|
||||
description: 'Project ID input tooltip',
|
||||
id: 'tw.input.tooltip'
|
||||
id: 'sccn.input.tooltip'
|
||||
}
|
||||
});
|
||||
|
||||
@@ -48,7 +48,7 @@ class ProjectInput extends React.Component {
|
||||
}
|
||||
}
|
||||
extractProjectId (text) {
|
||||
const numberMatch = text.match(/\d+/);
|
||||
const numberMatch = text.trim().match(/^(\d+)$/);
|
||||
return numberMatch ? numberMatch[0] : null;
|
||||
}
|
||||
readProjectId (e) {
|
||||
@@ -96,6 +96,7 @@ class ProjectInput extends React.Component {
|
||||
/>
|
||||
<input
|
||||
ref={this.inputRef}
|
||||
placeholder="中社作品编号"
|
||||
spellCheck="false"
|
||||
type="text"
|
||||
value={`${PROJECT_BASE}${projectId}`}
|
||||
|
||||
@@ -3,9 +3,12 @@ import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import Box from '../box/box.jsx';
|
||||
import {ProjectUnavailableLegalReasons, ProjectUnsharedError} from '../../lib/tw-load-project-error';
|
||||
import {
|
||||
BackendProjectError, ProjectUnavailableLegalReasons, ProjectUnsharedError
|
||||
} from '../../lib/tw-load-project-error';
|
||||
|
||||
import styles from './project-load-error.css';
|
||||
import Account from '../sccn-account/account.jsx';
|
||||
|
||||
const UNSHARED_DOCS = 'https://docs.turbowarp.org/unshared-projects';
|
||||
|
||||
@@ -125,6 +128,7 @@ UnavailableLegalReasonsMessage.propTypes = {
|
||||
* @returns {boolean} true if ProjectLoadError has a friendly message for this error.
|
||||
*/
|
||||
const isKnownProjectLoadError = error => (
|
||||
error instanceof BackendProjectError ||
|
||||
error instanceof ProjectUnsharedError ||
|
||||
error instanceof ProjectUnavailableLegalReasons
|
||||
);
|
||||
@@ -136,7 +140,18 @@ const ProjectLoadError = ({error, isFullScreen}) => (
|
||||
})}
|
||||
>
|
||||
<Box className={styles.body}>
|
||||
{error instanceof ProjectUnavailableLegalReasons ? (
|
||||
{error instanceof BackendProjectError ? (
|
||||
<React.Fragment>
|
||||
<p className={styles.header}>{'无法打开作品'}</p>
|
||||
<p>{error.message}</p>
|
||||
<p>{'私有作品需要使用作者账号登录。登录后请重新加载。'}</p>
|
||||
<Account />
|
||||
<button
|
||||
className={styles.button}
|
||||
onClick={handleReload}
|
||||
>{'重新加载'}</button>
|
||||
</React.Fragment>
|
||||
) : error instanceof ProjectUnavailableLegalReasons ? (
|
||||
<UnavailableLegalReasonsMessage moreUrl={error.moreUrl} />
|
||||
) : (
|
||||
<UnsharedMessage />
|
||||
|
||||
@@ -4,6 +4,7 @@ import React from 'react';
|
||||
import {injectIntl, intlShape, defineMessages} from 'react-intl';
|
||||
|
||||
import LibraryItemComponent from '../components/library-item/library-item.jsx';
|
||||
import {libraryAssetURL} from '../lib/sccn/library-assets';
|
||||
|
||||
const messages = defineMessages({
|
||||
incompatible: {
|
||||
@@ -139,7 +140,7 @@ class LibraryItem extends React.PureComponent {
|
||||
render () {
|
||||
const iconMd5 = this.curIconMd5();
|
||||
const iconURL = iconMd5 ?
|
||||
`https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
|
||||
libraryAssetURL(iconMd5) :
|
||||
this.props.iconRawURL;
|
||||
return (
|
||||
<LibraryItemComponent
|
||||
|
||||
@@ -21,7 +21,7 @@ const alerts = [
|
||||
alertId: 'createSuccess',
|
||||
alertType: AlertTypes.STANDARD,
|
||||
clearList: ['createSuccess', 'creating', 'createCopySuccess', 'creatingCopy',
|
||||
'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving'],
|
||||
'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving', 'savingError', 'creatingError'],
|
||||
content: (
|
||||
<FormattedMessage
|
||||
defaultMessage="New project created."
|
||||
@@ -37,7 +37,7 @@ const alerts = [
|
||||
alertId: 'createCopySuccess',
|
||||
alertType: AlertTypes.STANDARD,
|
||||
clearList: ['createSuccess', 'creating', 'createCopySuccess', 'creatingCopy',
|
||||
'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving'],
|
||||
'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving', 'savingError', 'creatingError'],
|
||||
content: (
|
||||
<FormattedMessage
|
||||
defaultMessage="Project saved as a copy."
|
||||
@@ -53,7 +53,7 @@ const alerts = [
|
||||
alertId: 'createRemixSuccess',
|
||||
alertType: AlertTypes.STANDARD,
|
||||
clearList: ['createSuccess', 'creating', 'createCopySuccess', 'creatingCopy',
|
||||
'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving'],
|
||||
'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving', 'savingError', 'creatingError'],
|
||||
content: (
|
||||
<FormattedMessage
|
||||
defaultMessage="Project saved as a remix."
|
||||
|
||||
@@ -22,37 +22,12 @@ import {
|
||||
|
||||
import log from './log';
|
||||
import storage from './storage';
|
||||
import {ProjectUnsharedError, ProjectFetchError, ProjectUnavailableLegalReasons} from './tw-load-project-error';
|
||||
import {BackendProjectError, ProjectFetchError} from './tw-load-project-error';
|
||||
import backend from './sccn/api';
|
||||
|
||||
import VM from 'scratch-vm';
|
||||
import {fetchProjectMeta} from './tw-project-meta-fetcher-hoc.jsx';
|
||||
|
||||
// TW: Temporary hack for project tokens
|
||||
const fetchProjectToken = async projectId => {
|
||||
if (projectId === '0') {
|
||||
return null;
|
||||
}
|
||||
// Parse ?token=abcdef
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
if (searchParams.has('token')) {
|
||||
return searchParams.get('token');
|
||||
}
|
||||
// Parse #1?token=abcdef
|
||||
const hashParams = new URLSearchParams(location.hash.split('?')[1]);
|
||||
if (hashParams.has('token')) {
|
||||
return hashParams.get('token');
|
||||
}
|
||||
try {
|
||||
const metadata = await fetchProjectMeta(projectId);
|
||||
return metadata.project_token;
|
||||
} catch (e) {
|
||||
log.error(e);
|
||||
if (e instanceof ProjectUnavailableLegalReasons) {
|
||||
throw e;
|
||||
}
|
||||
throw new ProjectUnsharedError('Cannot access project token. Project is probably unshared. See https://docs.turbowarp.org/unshared-projects');
|
||||
}
|
||||
};
|
||||
const fetchProjectToken = projectId => (projectId === '0' ?
|
||||
Promise.resolve(null) : backend.project(projectId).then(config => config.projectToken));
|
||||
|
||||
/* Higher Order Component to provide behavior for loading projects by id. If
|
||||
* there's no id, the default project is loaded.
|
||||
@@ -158,7 +133,7 @@ const ProjectFetcherHOC = function (WrappedComponent) {
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.props.onError(err);
|
||||
this.props.onError(new BackendProjectError(err.message || '无法加载作品'));
|
||||
log.error(err);
|
||||
});
|
||||
}
|
||||
@@ -210,8 +185,8 @@ const ProjectFetcherHOC = function (WrappedComponent) {
|
||||
vm: PropTypes.instanceOf(VM)
|
||||
};
|
||||
ProjectFetcherComponent.defaultProps = {
|
||||
assetHost: 'https://assets.scratch.mit.edu',
|
||||
projectHost: 'https://projects.scratch.mit.edu'
|
||||
assetHost: backend.url('/editor/assets'),
|
||||
projectHost: backend.url('/editor/projects')
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
|
||||
@@ -6,7 +6,7 @@ import VM from 'scratch-vm';
|
||||
|
||||
import collectMetadata from '../lib/collect-metadata';
|
||||
import log from '../lib/log';
|
||||
import storage from '../lib/storage';
|
||||
import backend from './sccn/api';
|
||||
import dataURItoBlob from '../lib/data-uri-to-blob';
|
||||
import saveProjectToServer from '../lib/save-project-to-server';
|
||||
|
||||
@@ -67,6 +67,10 @@ const ProjectSaverHOC = function (WrappedComponent) {
|
||||
this.props.onSetProjectSaver(this.tryToAutoSave);
|
||||
}
|
||||
componentDidUpdate (prevProps) {
|
||||
if (this.rescheduleAfterSave && this.props.isShowingSaveable) {
|
||||
this.rescheduleAfterSave = false;
|
||||
this.scheduleAutoSave();
|
||||
}
|
||||
if (!this.props.isAnyCreatingNewState && prevProps.isAnyCreatingNewState) {
|
||||
this.reportTelemetryEvent('projectWasCreated');
|
||||
}
|
||||
@@ -74,7 +78,8 @@ const ProjectSaverHOC = function (WrappedComponent) {
|
||||
this.reportTelemetryEvent('projectDidLoad');
|
||||
}
|
||||
|
||||
if (this.props.projectChanged && !prevProps.projectChanged) {
|
||||
if ((this.props.projectChanged && !prevProps.projectChanged) ||
|
||||
this.props.reduxProjectTitle !== prevProps.reduxProjectTitle) {
|
||||
this.scheduleAutoSave();
|
||||
}
|
||||
if (this.props.isUpdating && !prevProps.isUpdating) {
|
||||
@@ -217,7 +222,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
|
||||
* @param {?object} requestParams - object of params to add to request body
|
||||
*/
|
||||
storeProject (projectId, requestParams) {
|
||||
requestParams = requestParams || {};
|
||||
requestParams = {title: this.props.reduxProjectTitle, ...requestParams};
|
||||
this.clearAutoSaveTimeout();
|
||||
// Serialize VM state now before embarking on
|
||||
// the asynchronous journey of storing assets to
|
||||
@@ -227,14 +232,8 @@ const ProjectSaverHOC = function (WrappedComponent) {
|
||||
// we just finished saving).
|
||||
const savedVMState = this.props.vm.toJSON();
|
||||
return Promise.all(this.props.vm.assets
|
||||
.filter(asset => !asset.clean)
|
||||
.map(
|
||||
asset => storage.store(
|
||||
asset.assetType,
|
||||
asset.dataFormat,
|
||||
asset.data,
|
||||
asset.assetId
|
||||
).then(response => {
|
||||
asset => backend.upload(asset).then(response => {
|
||||
// Asset servers respond with {status: ok} for successful POSTs
|
||||
if (response.status !== 'ok') {
|
||||
// Errors include a `code` property, e.g. "Forbidden"
|
||||
@@ -246,7 +245,13 @@ const ProjectSaverHOC = function (WrappedComponent) {
|
||||
)
|
||||
.then(() => this.props.onUpdateProjectData(projectId, savedVMState, requestParams))
|
||||
.then(response => {
|
||||
this.props.onSetProjectUnchanged();
|
||||
if (this.props.vm.toJSON() === savedVMState &&
|
||||
this.props.reduxProjectTitle === requestParams.title) {
|
||||
this.props.onSetProjectUnchanged();
|
||||
} else {
|
||||
// The reducer is still in a saving state here; schedule once it returns to the editor.
|
||||
this.rescheduleAfterSave = true;
|
||||
}
|
||||
const id = response.id.toString();
|
||||
if (id && this.props.onUpdateProjectThumbnail) {
|
||||
this.storeProjectThumbnail(id);
|
||||
|
||||
@@ -1,63 +1,10 @@
|
||||
import queryString from 'query-string';
|
||||
import xhr from 'xhr';
|
||||
import storage from '../lib/storage';
|
||||
import backend from './sccn/api';
|
||||
|
||||
/**
|
||||
* Save a project JSON to the project server.
|
||||
* This should eventually live in scratch-www.
|
||||
* @param {number} projectId the ID of the project, null if a new project.
|
||||
* @param {object} vmState the JSON project representation.
|
||||
* @param {object} params the request params.
|
||||
* @property {?number} params.originalId the original project ID if a copy/remix.
|
||||
* @property {?boolean} params.isCopy a flag indicating if this save is creating a copy.
|
||||
* @property {?boolean} params.isRemix a flag indicating if this save is creating a remix.
|
||||
* @property {?string} params.title the title of the project.
|
||||
* @return {Promise} A promise that resolves when the network request resolves.
|
||||
*/
|
||||
export default function (projectId, vmState, params) {
|
||||
const opts = {
|
||||
body: vmState,
|
||||
// If we set json:true then the body is double-stringified, so don't
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
withCredentials: true
|
||||
};
|
||||
const creatingProject = projectId === null || typeof projectId === 'undefined';
|
||||
const queryParams = {};
|
||||
if (Object.prototype.hasOwnProperty.call(params, 'originalId')) queryParams.original_id = params.originalId;
|
||||
if (Object.prototype.hasOwnProperty.call(params, 'isCopy')) queryParams.is_copy = params.isCopy;
|
||||
if (Object.prototype.hasOwnProperty.call(params, 'isRemix')) queryParams.is_remix = params.isRemix;
|
||||
if (Object.prototype.hasOwnProperty.call(params, 'title')) queryParams.title = params.title;
|
||||
let qs = queryString.stringify(queryParams);
|
||||
if (qs) qs = `?${qs}`;
|
||||
if (creatingProject) {
|
||||
Object.assign(opts, {
|
||||
method: 'post',
|
||||
url: `${storage.projectHost}/${qs}`
|
||||
});
|
||||
} else {
|
||||
Object.assign(opts, {
|
||||
method: 'put',
|
||||
url: `${storage.projectHost}/${projectId}${qs}`
|
||||
});
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
xhr(opts, (err, response) => {
|
||||
if (err) return reject(err);
|
||||
if (response.statusCode !== 200) return reject(response.statusCode);
|
||||
let body;
|
||||
try {
|
||||
// Since we didn't set json: true, we have to parse manually
|
||||
body = JSON.parse(response.body);
|
||||
} catch (e) {
|
||||
return reject(e);
|
||||
}
|
||||
body.id = projectId;
|
||||
if (creatingProject) {
|
||||
body.id = body['content-name'];
|
||||
}
|
||||
resolve(body);
|
||||
});
|
||||
});
|
||||
}
|
||||
export default async (projectId, vmState, params) => {
|
||||
const result = await backend.save(projectId, vmState, params);
|
||||
// Once an imported URL has been saved, reloading must open the server copy.
|
||||
const url = new URL(window.location.href);
|
||||
for (const key of ['project_url', 'project_title', 'token']) url.searchParams.delete(key);
|
||||
history.replaceState(null, '', `${url.pathname}${url.search}${url.hash.split('?')[0]}`);
|
||||
return result;
|
||||
};
|
||||
@@ -0,0 +1,123 @@
|
||||
// The destination is deployment configuration, never a URL parameter supplied by a project.
|
||||
const apiBase = (process.env.SCCN_API_BASE || '/api').replace(/\/$/, '');
|
||||
|
||||
class BackendClient {
|
||||
constructor () {
|
||||
this.state = {user: null, ready: false, error: null, projects: {}};
|
||||
this.listeners = new Set();
|
||||
this.uploaded = new Set();
|
||||
this.revisions = new Map();
|
||||
}
|
||||
url (path) {
|
||||
return `${apiBase}${path}`;
|
||||
}
|
||||
subscribe (listener) {
|
||||
this.listeners.add(listener);
|
||||
listener(this.state);
|
||||
return () => this.listeners.delete(listener);
|
||||
}
|
||||
update (changes) {
|
||||
this.state = {...this.state, ...changes};
|
||||
this.listeners.forEach(listener => listener(this.state));
|
||||
}
|
||||
async request (path, options = {}) {
|
||||
let response;
|
||||
try {
|
||||
response = await fetch(this.url(path), {credentials: 'include', ...options});
|
||||
} catch (cause) {
|
||||
const error = new Error('无法连接服务器，请检查网络后重试。作品仍保留在编辑器中。');
|
||||
this.update({error});
|
||||
throw error;
|
||||
}
|
||||
let body;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch (cause) {
|
||||
const error = new Error(`服务器返回了无效响应（${response.status}），请稍后重试。`);
|
||||
this.update({error});
|
||||
throw error;
|
||||
}
|
||||
if (!response.ok || (body.code && body.code !== 0)) {
|
||||
const error = new Error(response.status === 409 ?
|
||||
'作品已在其他窗口更新。请先下载备份或另存副本，再重新打开作品。' :
|
||||
response.status === 401 ? '登录已失效，请重新登录后保存。' :
|
||||
body.message || `请求失败（${response.status}）`);
|
||||
error.status = response.status;
|
||||
error.code = body.code;
|
||||
this.update({error, ...(response.status === 401 ? {user: null} : {})});
|
||||
throw error;
|
||||
}
|
||||
return Object.prototype.hasOwnProperty.call(body, 'data') ? body.data : body;
|
||||
}
|
||||
async session () {
|
||||
try {
|
||||
const session = await this.request('/editor/session');
|
||||
const changedUser = (this.state.user && this.state.user.id) !== (session.user && session.user.id);
|
||||
this.update({user: session.user, ready: true, ...(changedUser ? {projects: {}} : {})});
|
||||
} catch (error) {
|
||||
this.update({user: null, ready: true});
|
||||
}
|
||||
}
|
||||
async login (email, password) {
|
||||
await this.request('/auth/login', {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({email, password})
|
||||
});
|
||||
await this.session();
|
||||
if (!this.state.user) throw new Error('无法恢复登录会话，请检查浏览器 Cookie 设置。');
|
||||
this.update({error: null});
|
||||
}
|
||||
async logout () {
|
||||
await this.request('/auth/logout', {method: 'POST'});
|
||||
this.update({user: null, projects: {}});
|
||||
}
|
||||
async project (id) {
|
||||
const config = await this.request(`/projects/${encodeURIComponent(id)}/editor`);
|
||||
this.revisions.set(String(id), config.revision);
|
||||
this.update({projects: {...this.state.projects, [id]: config}});
|
||||
return config;
|
||||
}
|
||||
async permissions (id) {
|
||||
// Refresh permissions after login without replacing the loaded revision (lost-update protection).
|
||||
const config = await this.request(`/projects/${encodeURIComponent(id)}/editor`);
|
||||
this.update({projects: {...this.state.projects, [id]: config}});
|
||||
}
|
||||
async upload (asset) {
|
||||
const name = `${asset.assetId}.${asset.dataFormat}`;
|
||||
if (this.uploaded.has(name)) return {status: 'ok'};
|
||||
const result = await this.request(`/editor/assets/${name}`, {
|
||||
method: 'POST', headers: {'Content-Type': 'application/octet-stream'}, body: asset.data
|
||||
});
|
||||
this.uploaded.add(name);
|
||||
return result;
|
||||
}
|
||||
async save (id, json, params = {}) {
|
||||
const creating = id === null || typeof id === 'undefined' || String(id) === '0';
|
||||
const query = new URLSearchParams();
|
||||
if (params.title) query.set('title', params.title);
|
||||
if (params.originalId) query.set('original_id', params.originalId);
|
||||
if (params.isCopy) query.set('is_copy', '1');
|
||||
if (params.isRemix) query.set('is_remix', '1');
|
||||
if (!creating) {
|
||||
const revision = this.revisions.get(String(id));
|
||||
if (!revision) throw new Error('作品版本信息缺失，请先下载备份并重新打开作品。');
|
||||
query.set('revision', revision);
|
||||
}
|
||||
const result = await this.request(`/editor/projects/${creating ? '' : id}?${query}`, {
|
||||
method: creating ? 'POST' : 'PUT', headers: {'Content-Type': 'application/json'}, body: json
|
||||
});
|
||||
this.revisions.set(String(result.id), result.revision);
|
||||
this.update({error: null,
|
||||
projects: {...this.state.projects,
|
||||
[result.id]: {
|
||||
canSave: true, canCreateCopy: true, canRemix: false, revision: result.revision
|
||||
}}});
|
||||
return result;
|
||||
}
|
||||
thumbnail (id, blob) {
|
||||
return this.request(`/projects/${id}/thumbnail`, {method: 'POST', body: blob});
|
||||
}
|
||||
}
|
||||
|
||||
const backend = new BackendClient();
|
||||
export {BackendClient};
|
||||
export default backend;
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import backend from './api';
|
||||
|
||||
const BackendHOC = WrappedComponent => {
|
||||
class BackendGUI extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = backend.state;
|
||||
this.refresh = () => backend.session();
|
||||
this.handleThumbnail = (id, blob) => backend.thumbnail(id, blob).catch(() => {});
|
||||
}
|
||||
componentDidMount () {
|
||||
this.unsubscribe = backend.subscribe(state => this.setState(state));
|
||||
this.refresh();
|
||||
window.addEventListener('focus', this.refresh);
|
||||
}
|
||||
componentDidUpdate (prevProps, prevState) {
|
||||
if (this.state.user && this.state.user !== prevState.user &&
|
||||
this.props.backendProjectId && this.props.backendProjectId !== '0') {
|
||||
backend.permissions(this.props.backendProjectId).catch(() => {});
|
||||
}
|
||||
}
|
||||
componentWillUnmount () {
|
||||
this.unsubscribe();
|
||||
window.removeEventListener('focus', this.refresh);
|
||||
}
|
||||
render () {
|
||||
const {backendProjectId, backendPlayerOnly, ...props} = this.props;
|
||||
const project = this.state.projects[backendProjectId];
|
||||
const ownsProject = this.state.user && project && project.canSave;
|
||||
return (
|
||||
<WrappedComponent
|
||||
{...props}
|
||||
assetHost={backend.url('/editor/assets')}
|
||||
projectHost={backend.url('/editor/projects')}
|
||||
canSave={Boolean(ownsProject && !backendPlayerOnly)}
|
||||
canCreateNew={Boolean(this.state.user && !backendPlayerOnly)}
|
||||
canCreateCopy={Boolean(ownsProject && !backendPlayerOnly)}
|
||||
canRemix={Boolean(this.state.user && project && project.canRemix && !backendPlayerOnly)}
|
||||
onUpdateProjectThumbnail={this.handleThumbnail}
|
||||
autoSaveIntervalSecs={30}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
BackendGUI.propTypes = {
|
||||
backendProjectId: PropTypes.string,
|
||||
backendPlayerOnly: PropTypes.bool
|
||||
};
|
||||
return connect(state => ({
|
||||
backendProjectId: state.scratchGui.projectState.projectId,
|
||||
backendPlayerOnly: state.scratchGui.mode.isPlayerOnly
|
||||
}))(BackendGUI);
|
||||
};
|
||||
|
||||
export default BackendHOC;
|
||||
@@ -0,0 +1,4 @@
|
||||
import backend from './api';
|
||||
|
||||
// Thumbnails (including rotating sprite costumes) use the same backend as VM assets.
|
||||
export const libraryAssetURL = name => backend.url(`/editor/assets/internalapi/asset/${name}/get/`);
|
||||
@@ -43,7 +43,15 @@ class ProjectUnavailableLegalReasons extends LoadProjectError {
|
||||
}
|
||||
}
|
||||
|
||||
class BackendProjectError extends LoadProjectError {
|
||||
constructor (message) {
|
||||
super(message);
|
||||
this.name = 'BackendProjectError';
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
BackendProjectError,
|
||||
LoadProjectError,
|
||||
ProjectUnsharedError,
|
||||
ProjectFetchError,
|
||||
|
||||
@@ -5,42 +5,16 @@ import log from './log';
|
||||
|
||||
import {setProjectTitle} from '../reducers/project-title';
|
||||
import {setAuthor, setDescription} from '../reducers/tw';
|
||||
import {ProjectUnavailableLegalReasons} from './tw-load-project-error';
|
||||
import backend from './sccn/api';
|
||||
|
||||
export const fetchProjectMeta = async projectId => {
|
||||
// When people reopen tabs, sometimes the browser is *very* aggressive about caching even when the
|
||||
// trampoline says not to, so we're going to try putting a cache buster in here.
|
||||
const cacheBuster = `?rudebuster=${Math.random()}`;
|
||||
const urls = [
|
||||
`https://trampoline.turbowarp.org/api/projects/${projectId}${cacheBuster}`,
|
||||
`https://trampoline.turbowarp.xyz/api/projects/${projectId}${cacheBuster}`
|
||||
];
|
||||
let firstError;
|
||||
for (const url of urls) {
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
return data;
|
||||
}
|
||||
if (res.status === 451) {
|
||||
throw new ProjectUnavailableLegalReasons('Project is unavailable for legal reasons', data.url);
|
||||
}
|
||||
if (res.status === 404) {
|
||||
throw new Error('Project is probably unshared');
|
||||
}
|
||||
throw new Error(`Unexpected status code: ${res.status}`);
|
||||
} catch (err) {
|
||||
// Mirror would get the same error so don't try again
|
||||
if (err instanceof ProjectUnavailableLegalReasons) {
|
||||
throw err;
|
||||
}
|
||||
if (!firstError) {
|
||||
firstError = err;
|
||||
}
|
||||
}
|
||||
}
|
||||
throw firstError;
|
||||
const metadata = await backend.request(`/projects/${projectId}`);
|
||||
return {
|
||||
...metadata,
|
||||
author: {id: metadata.owner_id,
|
||||
username: backend.state.user &&
|
||||
backend.state.user.id === metadata.owner_id ? backend.state.user.username : `用户 ${metadata.owner_id}`}
|
||||
};
|
||||
};
|
||||
|
||||
const getNoIndexTag = () => document.querySelector('meta[name="robots"][content="noindex"]');
|
||||
@@ -81,7 +55,7 @@ const TWProjectMetaFetcherHOC = function (WrappedComponent) {
|
||||
this.props.onSetProjectTitle(title);
|
||||
}
|
||||
const authorName = data.author.username;
|
||||
const authorThumbnail = `https://trampoline.turbowarp.org/avatars/${data.author.id}`;
|
||||
const authorThumbnail = '';
|
||||
this.props.onSetAuthor(authorName, authorThumbnail);
|
||||
const instructions = data.instructions || '';
|
||||
const credits = data.description || '';
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
import React from 'react';
|
||||
import GUI from '../containers/gui.jsx';
|
||||
import BackendHOC from '../lib/sccn/gui-hoc.jsx';
|
||||
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
const cloudHost = searchParams.get('cloud_host') || 'wss://clouddata.turbowarp.org';
|
||||
|
||||
const initializeStorage = storage => {
|
||||
storage.addOfficialScratchWebStores();
|
||||
};
|
||||
|
||||
const RenderGUI = props => (
|
||||
<GUI
|
||||
cloudHost={cloudHost}
|
||||
canUseCloud
|
||||
hasCloudPermission
|
||||
canUseCloud={false}
|
||||
hasCloudPermission={false}
|
||||
canSave={false}
|
||||
onStorageInit={initializeStorage}
|
||||
basePath={process.env.ROOT}
|
||||
canEditTitle
|
||||
enableCommunity
|
||||
@@ -17,4 +20,4 @@ const RenderGUI = props => (
|
||||
/>
|
||||
);
|
||||
|
||||
export default RenderGUI;
|
||||
export default BackendHOC(RenderGUI);
|
||||
@@ -32,7 +32,6 @@ import '../lib/tw-fix-history-api';
|
||||
import GUI from './render-gui.jsx';
|
||||
import MenuBar from '../components/menu-bar/menu-bar.jsx';
|
||||
import ProjectInput from '../components/tw-project-input/project-input.jsx';
|
||||
import FeaturedProjects from '../components/tw-featured-projects/featured-projects.jsx';
|
||||
import Description from '../components/tw-description/description.jsx';
|
||||
import BrowserModal from '../components/browser-modal/browser-modal.jsx';
|
||||
import CloudVariableBadge from '../containers/tw-cloud-variable-badge.jsx';
|
||||
@@ -279,22 +278,6 @@ class Interface extends React.Component {
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className={styles.section}>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
// eslint-disable-next-line max-len
|
||||
defaultMessage="{APP_NAME} is a Scratch mod that compiles projects to JavaScript to make them run really fast. Try it out by inputting a project ID or URL above or choosing a featured project below."
|
||||
description="Description of TurboWarp on the homepage"
|
||||
id="tw.home.description"
|
||||
values={{
|
||||
APP_NAME
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.section}>
|
||||
<FeaturedProjects studio="27205657" />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@ const START_FETCHING_NEW = 'scratch-gui/project-state/START_FETCHING_NEW';
|
||||
const START_LOADING_VM_FILE_UPLOAD = 'scratch-gui/project-state/START_LOADING_VM_FILE_UPLOAD';
|
||||
const START_MANUAL_UPDATING = 'scratch-gui/project-state/START_MANUAL_UPDATING';
|
||||
const START_REMIXING = 'scratch-gui/project-state/START_REMIXING';
|
||||
const START_UPDATING_BEFORE_CREATING_COPY = 'scratch-gui/project-state/START_UPDATING_BEFORE_CREATING_COPY';
|
||||
const START_CREATING_COPY = 'scratch-gui/project-state/START_CREATING_COPY';
|
||||
const START_UPDATING_BEFORE_CREATING_NEW = 'scratch-gui/project-state/START_UPDATING_BEFORE_CREATING_NEW';
|
||||
|
||||
const defaultProjectId = '0'; // hardcoded id of default project
|
||||
@@ -308,10 +308,11 @@ const reducer = function (state, action) {
|
||||
});
|
||||
}
|
||||
return state;
|
||||
case START_UPDATING_BEFORE_CREATING_COPY:
|
||||
case START_CREATING_COPY:
|
||||
if (state.loadingState === LoadingState.SHOWING_WITH_ID) {
|
||||
// Save the current snapshot as a new project, even when the original has a version conflict.
|
||||
return Object.assign({}, state, {
|
||||
loadingState: LoadingState.UPDATING_BEFORE_COPY
|
||||
loadingState: LoadingState.CREATING_COPY
|
||||
});
|
||||
}
|
||||
return state;
|
||||
@@ -497,7 +498,7 @@ const manualUpdateProject = () => ({
|
||||
});
|
||||
|
||||
const saveProjectAsCopy = () => ({
|
||||
type: START_UPDATING_BEFORE_CREATING_COPY
|
||||
type: START_CREATING_COPY
|
||||
});
|
||||
|
||||
const remixProject = () => ({
|
||||
|
||||
@@ -378,14 +378,14 @@ test('autoUpdateProject should prepare to update', () => {
|
||||
expect(resultState.projectId).toBe('100');
|
||||
});
|
||||
|
||||
test('saveProjectAsCopy should save, before preparing to save as a copy', () => {
|
||||
test('saveProjectAsCopy creates a copy without overwriting the original', () => {
|
||||
const initialState = {
|
||||
projectId: '100',
|
||||
loadingState: LoadingState.SHOWING_WITH_ID
|
||||
};
|
||||
const action = saveProjectAsCopy();
|
||||
const resultState = projectStateReducer(initialState, action);
|
||||
expect(resultState.loadingState).toBe(LoadingState.UPDATING_BEFORE_COPY);
|
||||
expect(resultState.loadingState).toBe(LoadingState.CREATING_COPY);
|
||||
expect(resultState.projectId).toBe('100');
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
import {BackendClient} from '../../../src/lib/sccn/api';
|
||||
|
||||
const response = (data, status = 200) => ({ok: status < 400, status, json: async () => data});
|
||||
|
||||
describe('ScCN backend adapter', () => {
|
||||
let client;
|
||||
beforeEach(() => {
|
||||
client = new BackendClient();
|
||||
global.fetch = jest.fn();
|
||||
});
|
||||
afterEach(() => { delete global.fetch; });
|
||||
|
||||
test('uploads even clean builtin assets once per server session', async () => {
|
||||
fetch.mockResolvedValue(response({status: 'ok'}));
|
||||
const asset = {assetId: 'abc', dataFormat: 'svg', data: new Uint8Array([1, 2]), clean: true};
|
||||
await client.upload(asset);
|
||||
await client.upload(asset);
|
||||
expect(fetch).toHaveBeenCalledTimes(1);
|
||||
expect(fetch.mock.calls[0][1]).toMatchObject({credentials: 'include', method: 'POST', body: asset.data});
|
||||
});
|
||||
test('failed uploads remain retryable', async () => {
|
||||
fetch.mockResolvedValueOnce(response({code: 40101}, 401)).mockResolvedValue(response({status: 'ok'}));
|
||||
const asset = {assetId: 'abc', dataFormat: 'svg', data: new Uint8Array([1])};
|
||||
await expect(client.upload(asset)).rejects.toThrow('登录');
|
||||
await client.upload(asset);
|
||||
expect(fetch).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
test('creates a project with raw JSON and updates with the loaded revision', async () => {
|
||||
fetch.mockResolvedValueOnce(response({'content-name': '12', id: 12, revision: 1}))
|
||||
.mockResolvedValueOnce(response({id: 12, revision: 2}));
|
||||
await client.save(null, '{"targets":[]}', {title: '标题'});
|
||||
await client.save('12', '{"targets":[]}', {title: '新标题'});
|
||||
expect(fetch.mock.calls[0][0]).toContain('/editor/projects/?title=');
|
||||
expect(fetch.mock.calls[0][1].body).toBe('{"targets":[]}');
|
||||
expect(fetch.mock.calls[1][0]).toContain('revision=1');
|
||||
expect(client.revisions.get('12')).toBe(2);
|
||||
});
|
||||
test('does not overwrite the loaded revision when refreshing permissions', async () => {
|
||||
fetch.mockResolvedValueOnce(response({data: {revision: 4, canSave: true}}))
|
||||
.mockResolvedValueOnce(response({data: {revision: 9, canSave: true}}))
|
||||
.mockResolvedValueOnce(response({code: 40902}, 409));
|
||||
await client.project('12');
|
||||
await client.permissions('12');
|
||||
expect(client.revisions.get('12')).toBe(4);
|
||||
await expect(client.save('12', '{}')).rejects.toThrow('其他窗口');
|
||||
expect(client.revisions.get('12')).toBe(4);
|
||||
expect(fetch.mock.calls[2][0]).toContain('revision=4');
|
||||
});
|
||||
test('copy and remix create new IDs without a revision precondition', async () => {
|
||||
fetch.mockResolvedValue(response({id: 13, revision: 1}));
|
||||
await client.save(null, '{}', {originalId: 12, isCopy: 1});
|
||||
expect(fetch.mock.calls[0][0]).toContain('original_id=12&is_copy=1');
|
||||
expect(fetch.mock.calls[0][0]).not.toContain('revision=');
|
||||
await client.save(null, '{}', {originalId: 12, isRemix: 1});
|
||||
expect(fetch.mock.calls[1][0]).toContain('original_id=12&is_remix=1');
|
||||
});
|
||||
test('refuses updates without a loaded version', async () => {
|
||||
await expect(client.save('12', '{}')).rejects.toThrow('版本');
|
||||
expect(fetch).not.toHaveBeenCalled();
|
||||
});
|
||||
test('switching accounts clears cached ownership', async () => {
|
||||
client.state = {...client.state, user: {id: 1}, projects: {12: {canSave: true}}};
|
||||
fetch.mockResolvedValue(response({data: {user: {id: 2}}}));
|
||||
await client.session();
|
||||
expect(client.state.projects).toEqual({});
|
||||
expect(client.state.user.id).toBe(2);
|
||||
});
|
||||
test('logout clears ownership and uses the HttpOnly cookie', async () => {
|
||||
client.state = {...client.state, user: {id: 1}, projects: {12: {canSave: true}}};
|
||||
fetch.mockResolvedValue(response({code: 0}));
|
||||
await client.logout();
|
||||
expect(client.state.user).toBe(null);
|
||||
expect(client.state.projects).toEqual({});
|
||||
expect(fetch.mock.calls[0][1]).toMatchObject({credentials: 'include', method: 'POST'});
|
||||
});
|
||||
test('handles network and non-JSON responses without claiming a successful save', async () => {
|
||||
fetch.mockRejectedValueOnce(new Error('network'));
|
||||
await expect(client.save(null, '{}')).rejects.toThrow('无法连接服务器');
|
||||
fetch.mockResolvedValueOnce({ok: true, status: 200, json: async () => { throw new Error('html'); }});
|
||||
await expect(client.save(null, '{}')).rejects.toThrow('无效响应');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
import projectSaverHOC from '../../../src/lib/project-saver-hoc.jsx';
|
||||
|
||||
jest.mock('react-redux', () => ({connect: () => Component => Component}));
|
||||
jest.mock('scratch-vm', () => class VM {});
|
||||
jest.mock('../../../src/lib/collect-metadata', () => jest.fn());
|
||||
jest.mock('../../../src/lib/log', () => ({error: jest.fn()}));
|
||||
jest.mock('../../../src/reducers/alerts', () => ({}));
|
||||
jest.mock('../../../src/lib/sccn/api', () => ({upload: jest.fn()}));
|
||||
|
||||
const makeSaver = () => {
|
||||
const Component = projectSaverHOC(() => null);
|
||||
const props = {
|
||||
reduxProjectTitle: 'Original title',
|
||||
vm: {toJSON: jest.fn(() => '{"targets":[]}'), assets: []},
|
||||
autoSaveTimeoutId: null,
|
||||
autoSaveIntervalSecs: 30,
|
||||
isShowingSaveable: false,
|
||||
isUpdating: true,
|
||||
projectChanged: true,
|
||||
setAutoSaveTimeoutId: jest.fn(),
|
||||
onSetProjectUnchanged: jest.fn()
|
||||
};
|
||||
const instance = new Component(props);
|
||||
instance.reportTelemetryEvent = jest.fn();
|
||||
return {instance, props};
|
||||
};
|
||||
|
||||
afterEach(() => jest.useRealTimers());
|
||||
|
||||
test('edits during a save remain dirty and schedule another save after the saving state ends', async () => {
|
||||
jest.useFakeTimers();
|
||||
const {instance, props} = makeSaver();
|
||||
let finish;
|
||||
props.onUpdateProjectData = jest.fn(() => new Promise(resolve => { finish = resolve; }));
|
||||
const saving = instance.storeProject('1');
|
||||
await Promise.resolve();
|
||||
instance.props = {...props, reduxProjectTitle: 'Edited while saving'};
|
||||
finish({id: 1});
|
||||
await saving;
|
||||
expect(props.onSetProjectUnchanged).not.toHaveBeenCalled();
|
||||
expect(props.setAutoSaveTimeoutId).not.toHaveBeenCalled();
|
||||
const previous = instance.props;
|
||||
instance.props = {...previous, isUpdating: false, isShowingSaveable: true};
|
||||
instance.componentDidUpdate(previous);
|
||||
expect(props.setAutoSaveTimeoutId).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('an unchanged snapshot becomes clean without scheduling another save', async () => {
|
||||
const {instance, props} = makeSaver();
|
||||
props.onUpdateProjectData = jest.fn().mockResolvedValue({id: 1});
|
||||
await instance.storeProject('1');
|
||||
expect(props.onSetProjectUnchanged).toHaveBeenCalledTimes(1);
|
||||
expect(props.setAutoSaveTimeoutId).not.toHaveBeenCalled();
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
import {libraryAssetURL} from '../../../src/lib/sccn/library-assets';
|
||||
|
||||
jest.mock('../../../src/lib/sccn/api', () => ({url: path => `https://backend.example/api${path}`}));
|
||||
|
||||
test('library previews use the configured backend including its API prefix', () => {
|
||||
expect(libraryAssetURL('809d9b47347a6af2860e7a3a35bce057.svg')).toBe(
|
||||
'https://backend.example/api/editor/assets/internalapi/asset/809d9b47347a6af2860e7a3a35bce057.svg/get/'
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
import saveProject from '../../../src/lib/save-project-to-server';
|
||||
import backend from '../../../src/lib/sccn/api';
|
||||
|
||||
jest.mock('../../../src/lib/sccn/api', () => ({save: jest.fn()}));
|
||||
|
||||
describe('saved import navigation', () => {
|
||||
beforeEach(() => {
|
||||
global.window = {location: {href: 'http://localhost/editor.html?project_url=https%3A%2F%2Fexample.test%2Fa.sb3&project_title=old&token=read-token&locale=zh-cn#0?token=old'}};
|
||||
global.history = {replaceState: jest.fn()};
|
||||
});
|
||||
afterEach(() => {
|
||||
delete global.window;
|
||||
delete global.history;
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
test('successful save removes stale import overrides but preserves editor options', async () => {
|
||||
backend.save.mockResolvedValue({id: 8, revision: 1});
|
||||
expect(await saveProject(null, '{}', {title: '作品'})).toEqual({id: 8, revision: 1});
|
||||
expect(history.replaceState).toHaveBeenCalledWith(null, '', '/editor.html?locale=zh-cn#0');
|
||||
});
|
||||
test('failed saves leave the import URL intact', async () => {
|
||||
backend.save.mockRejectedValue(new Error('offline'));
|
||||
await expect(saveProject(null, '{}')).rejects.toThrow('offline');
|
||||
expect(history.replaceState).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -179,6 +179,8 @@ module.exports = [
|
||||
'process.env.DEBUG': Boolean(process.env.DEBUG),
|
||||
'process.env.ENABLE_SERVICE_WORKER': JSON.stringify(process.env.ENABLE_SERVICE_WORKER || ''),
|
||||
'process.env.ROOT': JSON.stringify(root),
|
||||
'process.env.SCCN_API_BASE': JSON.stringify(process.env.SCCN_API_BASE ||
|
||||
(process.env.NODE_ENV === 'production' ? '/api' : 'http://localhost:3000/api')),
|
||||
'process.env.ROUTING_STYLE': JSON.stringify(process.env.ROUTING_STYLE || 'filehash'),
|
||||
'process.env.ENABLE_WINDCHIMES': JSON.stringify(process.env.ENABLE_WINDCHIMES || '')
|
||||
}),
|
||||
|
||||
Reference in new issue
Block a user