@abcnews/google-doc-scrollyteller 中文文档教程

Question

GoogleDocScrollyteller

一个用于 React 的 @abcnews/scrollyteller 预览组件，它加载、解析 & 从公共 Google 文档呈现类似奥德赛的内容，以及创建可粘贴的 Core Media 富文本.

Usage

只有一个强制属性，一个 renderPreview 函数，它将 scrollyteller 定义作为属性（config 和 panels)，并期望返回一个包含 的组件。

JavaScript usage

import GoogleDocScrollyteller from '@abcnews/google-doc-scrollyteller';
import Scrollyteller from '@abcnews/scrollyteller';
import React, { useState } from 'react';
import Graphic from '<somewhere>';

const Block = ({ panels, config }) => {
  const [graphicProps, setGraphicProps] = useState(null);

  return (
    <Scrollyteller
      panels={panels}
      {...config}
      onMarker={(data) => setGraphicProps(data)}
    >
      <Graphic {...graphicProps} />
    </Scrollyteller>
  );
};

const App = () => (
  <GoogleDocScrollyteller
    renderPreview={(props) => <Block {...props} />}
  />
);

export default App;

TypeScript usage

import GoogleDocScrollyteller from '@abcnews/google-doc-scrollyteller';
import Scrollyteller from '@abcnews/scrollyteller';
import type { ScrollytellerDefinition } from '@abcnews/scrollyteller';
import React, { useState } from 'react';
import Graphic from '<somewhere>';
import type { GraphicProps } from '<somewhere>';

const Block: React.FC<ScrollytellerDefinition<GraphicProps>> = ({
  panels,
  config,
}) => {
  const [graphicProps, setGraphicProps] = useState<GraphicProps>(null!);

  return (
    <Scrollyteller<PanelData>
      panels={panels}
      {...config}
      onMarker={(data: GraphicProps) => setGraphicProps(data)}
    >
      <Graphic {...graphicProps} />
    </Scrollyteller>
  );
};

const App: React.FC = () => (
  <GoogleDocScrollyteller<PanelData>
    renderPreview={(props) => <Block {...props} />}
  />
);

export default App;

Optional props

TODO

• preprocessCoreEl
• loadScrollytellerArgs
• postprocessScrollytellerDefinition
• renderFallbackImagesButton

Development

此项目使用 tsdx 构建/开发工具和 np 用于发布管理。

推荐的工作流程是在一个终端中运行 TSDX：

npm start

这构建到 /dist 并以监视模式运行项目，因此您在 src 中保存的任何编辑都会导致重建到 /分布。

然后在另一个中运行示例：

cd example
npm i
aunty serve

该示例导入并实时重新加载 /dist 中的任何内容，因此如果您看到过时的组件，确保 TSDX 按照上面的建议在监视模式下运行。

要进行一次性构建，请使用 npm run build。

要运行测试，请使用 npm test 或 yarn test。

Example

主要是为了帮助开发和演示用法，/example 中有一个示例项目。 它使用 aunty 作为构建工具来匹配通常的 ABC 新闻交互式开发工作流程。

Jest

Jest 测试设置为使用 npm test 或 yarn test 运行。

Bundle analysis

使用 size-limit 和 npm run size 计算你的库的实际成本，并用<代码>npm 运行分析。

Releasing

要将新版本发布到 NPM，请运行 npm run release 并按照提示操作。

Jest

Jest 测试设置为使用 npm test 或 yarn test 运行。

Bundle analysis

使用 size-limit 和 npm run size 计算你的库的实际成本，并用<代码>npm 运行分析。

Optimizations

请参阅主要的 tsdx 优化文档。 尤其要知道您可以利用仅限开发的优化：

// ./types/index.d.ts
declare var __DEV__: boolean;

// inside your code...
if (__DEV__) {
  console.log('foo');
}

Authors

• Colin Gourlay (gourlay.colin@abc.net.au)
• Simon Elvery (elvery.simon@abc.net.au)

查看贡献者的完整列表。