No more references to the term "chaincode" (#1134)
* rename all references * remove unnecessary dir * address skyler's comments * remove all refs to chaincode * fix docs * restore waterpark chaincode * Remove component duplicates * fix component * fix monaco * fix data share * newline * add issue comment * fix breaking * revert literate * revert demos * spacing
This commit is contained in:
sumedhb1995
GitHub
Родитель
5a3d4926d6
Коммит
0c4d083965
4
.npmrc
4
.npmrc
|
|
@ -6,8 +6,8 @@ always-auth=false
|
|||
@prague:registry=https://packages.wu2.prague.office-int.com
|
||||
@prague:always-auth=true
|
||||
|
||||
@chaincode:registry=https://packages.wu2.prague.office-int.com
|
||||
@chaincode:always-auth=true
|
||||
@component:registry=https://packages.wu2.prague.office-int.com
|
||||
@component:always-auth=true
|
||||
|
||||
@component:registry=https://packages.wu2.prague.office-int.com
|
||||
@component:always-auth=true
|
||||
|
|
|
|||
|
|
@ -1,11 +1,19 @@
|
|||
# 0.14 Breaking Changes
|
||||
|
||||
- [Samples and chaincode have been renamed to examples and components respectively](##Samples-and-chaincode-have-been-renamed-to-examples-and-components-respectively)
|
||||
- [Remove all references to the term chaincode](##Remove-all-references-to-the-term-chaincode)
|
||||
- [Top-level `type` on `IClient` removed](#Top-level-type-on-IClient-removed)
|
||||
|
||||
## Samples and chaincode have been renamed to examples and components respectively
|
||||
|
||||
The directories themselves have been renamed.
|
||||
All path references in the dockerfile and json manifests have been updated along with variables assigned using path constants in code
|
||||
|
||||
## Remove all references to the term chaincode
|
||||
|
||||
Any references to the internal name of "chaincode" have been removed, they have been replaced with "component"
|
||||
All packages starting with @chaincode now start with @component
|
||||
|
||||
## Top-level `type` on `IClient` removed
|
||||
|
||||
The `type` field on `IClient` has been removed.
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
|
||||
|
||||
Fluid enables distributed, collaborative applications by providing developers with eventually consistent [Distributed
|
||||
Data Structures](https://praguedocs.azurewebsites.net/get-started/dds.html), a flexible component and app model
|
||||
("Chaincode"), and a reference server implementation with minimal COGS ("Routerlicious.")
|
||||
Data Structures](https://praguedocs.azurewebsites.net/get-started/dds.html), a flexible component and app model,
|
||||
and a reference server implementation with minimal COGS ("Routerlicious.")
|
||||
|
||||
Teams are using Fluid for low latency collaboration, zero setup data persistance, and on-by-default cross app
|
||||
compatibility. Among other projects, our partner teams are building components for text editing, gaming, command line
|
||||
|
|
@ -90,7 +90,7 @@ the [Fluid](https://stackoverflow.microsoft.com/questions/tagged/fluid) tag.
|
|||
|
||||
## Source Code Overview
|
||||
|
||||
[Examples/Components](./examples/components) contains our latest component and chaincode demos. This is the right place to get started checking out the world of Fluid.
|
||||
[Examples/Components](./examples/components) contains our latest demos. This is the right place to get started checking out the world of Fluid.
|
||||
|
||||
[Packages](./packages) contains the core Fluid runtime
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ always-auth=false
|
|||
@prague:registry=https://packages.wu2.prague.office-int.com
|
||||
@prague:always-auth=true
|
||||
|
||||
@chaincode:registry=https://packages.wu2.prague.office-int.com
|
||||
@chaincode:always-auth=true
|
||||
@component:registry=https://packages.wu2.prague.office-int.com
|
||||
@component:always-auth=true
|
||||
|
||||
@component:registry=https://packages.wu2.prague.office-int.com
|
||||
@component:always-auth=true
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ always-auth=false
|
|||
@prague:registry=https://packages.wu2.prague.office-int.com
|
||||
@prague:always-auth=true
|
||||
|
||||
@chaincode:registry=https://packages.wu2.prague.office-int.com
|
||||
@chaincode:always-auth=true
|
||||
@component:registry=https://packages.wu2.prague.office-int.com
|
||||
@component:always-auth=true
|
||||
|
||||
@component:registry=https://packages.wu2.prague.office-int.com
|
||||
@component:always-auth=true
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ component code from a local web server, but will use the Fluid team's hosted Flu
|
|||
Congratulations, you have a component! Now it's time to share it. First, you need to publish your package to Verdaccio,
|
||||
the Fluid team's private NPM repository. To do that, use `npm run deploy`. This will bump the patch version of your
|
||||
package, build it, and publish the result to Verdaccio. It will also provide you a URL to your component of the form
|
||||
`https://www.wu2-ppe.prague.office-int.com/waterpark?chaincode=@chaincode/<your-package>`, which
|
||||
`https://www.wu2-ppe.prague.office-int.com/waterpark?chaincode=@component/<your-package>`, which
|
||||
you can use to load your component into the Water Park.
|
||||
|
||||
::: tip
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
# Chaincode
|
||||
# Component
|
||||
|
||||
Use [Yo Fluid](../../tools/generator-fluid/README.md) to start building components and chaincode.
|
||||
Use [Yo Fluid](../../tools/generator-fluid/README.md) to start building components and component.
|
||||
|
||||
## What's a chaincode?
|
||||
A chaincode is a installable block of code. They often create web components following the [Fluid component model](../../docs/architecture/components/web-component-model.md).
|
||||
## What's a component?
|
||||
A component is a installable block of code. They often create web components following the [Fluid component model](../../docs/architecture/components/web-component-model.md).
|
||||
|
||||
## How do I build a chaincode?
|
||||
Build a chaincode with [Yo Fluid](../../tools/generator-fluid/README.md). We strongly suggest using Yo Fluid as your starting point. For more exotic features, you can look through the examples in this directory.
|
||||
## How do I build a component?
|
||||
Build a component with [Yo Fluid](../../tools/generator-fluid/README.md). We strongly suggest using Yo Fluid as your starting point. For more exotic features, you can look through the examples in this directory.
|
||||
|
||||
## How do I deploy a chaincode?
|
||||
## How do I deploy a component?
|
||||
|
||||
To deploy and make your chaincode "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
To deploy and make your component "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
|
||||
Go to https://packages.wu2.prague.office-int.com
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ To deploy, use
|
|||
npm run deploy
|
||||
|
||||
|
||||
To view your chaincode, you can go to the URL
|
||||
To view your component, you can go to the URL
|
||||
|
||||
https://www.wu2-ppe.prague.office-int.com/loader/fluid/{random container name}?chaincode={pkg.name}@{pkg.version};
|
||||
|
||||
|
|
@ -34,6 +34,6 @@ This link is then shareable and, in an expanding list of components, embeddable!
|
|||
|
||||
|
||||
## Troubleshooting
|
||||
If you find a broken chaincode, feel free to fix it. We iterate on chaincode examples very quickly. The most recently updated chaincodes will always be working, but we don't guarantee updates to older chaincode.
|
||||
If you find a broken component, feel free to fix it. We iterate on component examples very quickly. The most recently updated components will always be working, but we don't guarantee updates to older component.
|
||||
|
||||
If you have questions, please use the [Microsoft internal StackOverflow](https://stackoverflow.microsoft.com/) using the [tag Fluid](https://stackoverflow.microsoft.com/questions/tagged/fluid)
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: "chaincode/chat",
|
||||
devtoolNamespace: "component/chat",
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
node: {
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ class CodeMirrorFactory implements IRuntimeFactory {
|
|||
|
||||
public async instantiateRuntime(context: IContainerContext): Promise<IRuntime> {
|
||||
const registry = new Map<string, Promise<IComponentFactory>>([
|
||||
["@chaincode/smde", Promise.resolve(smde)],
|
||||
["@component/smde", Promise.resolve(smde)],
|
||||
]);
|
||||
|
||||
const defaultComponentId = "default";
|
||||
const defaultComponent = "@chaincode/smde";
|
||||
const defaultComponent = "@component/smde";
|
||||
|
||||
const runtime = await ContainerRuntime.load(
|
||||
context,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -41,7 +41,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@fluid-example/monaco-container",
|
||||
"version": "0.14.0",
|
||||
"description": "Monaco chaincode container",
|
||||
"description": "Monaco component container",
|
||||
"license": "MIT",
|
||||
"author": "Microsoft",
|
||||
"sideEffects": [
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ async function getMonacoFluidExport() {
|
|||
}
|
||||
|
||||
/**
|
||||
* Instantiates a new chaincode host
|
||||
* Instantiates a new component host
|
||||
*/
|
||||
export async function instantiateRuntime(context: IContainerContext): Promise<IRuntime> {
|
||||
const registry = new Map<string, Promise<IComponentFactory>>([["@fluid-example/monaco", getMonacoFluidExport()]]);
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ You can try the following commands
|
|||
|
||||
|
||||
npm run deploy
|
||||
Publishes the chaincode to https://packages.wu2.prague.office-int.com/#/
|
||||
Publishes the component to https://packages.wu2.prague.office-int.com/#/
|
||||
````
|
||||
|
||||
We suggest you start by typing:
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -38,7 +38,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export class DrawerCommandBar extends React.Component<IDrawerCommandBarProps> {
|
|||
}
|
||||
|
||||
private async createDocument(details: { pkg: string; name: string; version: string; icon: string }) {
|
||||
const chaincode: IFluidCodeDetails = {
|
||||
const component: IFluidCodeDetails = {
|
||||
config: {
|
||||
"@fluid-example:cdn": "https://pragueauspkn-3873244262.azureedge.net",
|
||||
},
|
||||
|
|
@ -48,7 +48,7 @@ export class DrawerCommandBar extends React.Component<IDrawerCommandBarProps> {
|
|||
const member = context.getQuorum().getMember(clientId);
|
||||
const user = member ? member.client.user : {};
|
||||
|
||||
const name = await this.props.documentFactory.create(chaincode);
|
||||
const name = await this.props.documentFactory.create(component);
|
||||
this.props.documentsMap.set(name, { ...details, user, date: Date.now() });
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -41,7 +41,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Welcome to your first Fluid Chaincode
|
||||
# Welcome to your first Fluid Component
|
||||
|
||||
Welcome to your first chaincode component.
|
||||
Welcome to your first component.
|
||||
|
||||
## Getting Started
|
||||
To start coding, open this directory in your IDE and check out ./src/index.tsx
|
||||
|
|
@ -17,7 +17,7 @@ You can try the following commands
|
|||
|
||||
|
||||
npm run deploy
|
||||
Publishes the chaincode to https://packages.wu2.prague.office-int.com/#/
|
||||
Publishes the component to https://packages.wu2.prague.office-int.com/#/
|
||||
````
|
||||
|
||||
We suggest you start by typing:
|
||||
|
|
@ -32,7 +32,7 @@ Uncomment the commented code in ./src/index.tsx to add a title to your component
|
|||
|
||||
## Deploy
|
||||
|
||||
To deploy and make your chaincode "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
To deploy and make your component "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
|
||||
Go to https://packages.wu2.prague.office-int.com
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ To deploy, use
|
|||
npm run deploy
|
||||
|
||||
|
||||
To view your chaincode, you can go to the URL
|
||||
To view your component, you can go to the URL
|
||||
|
||||
https://www.wu2-ppe.prague.office-int.com/loader/stupefied-kilby/prague/{random container name}?chaincode={pkg.name}@{pkg.version};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { GithubCommentInstantiationFactory } from "./main";
|
|||
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const pkg = require("../package.json");
|
||||
export const chaincodeName = pkg.name as string;
|
||||
export const componentName = pkg.name as string;
|
||||
|
||||
/**
|
||||
* This does setup for the Container. The SimpleModuleInstantiationFactory also
|
||||
|
|
@ -22,9 +22,9 @@ export const chaincodeName = pkg.name as string;
|
|||
* 2. Map of string to factory for all components
|
||||
*/
|
||||
export const fluidExport = new SimpleModuleInstantiationFactory(
|
||||
chaincodeName,
|
||||
componentName,
|
||||
new Map([
|
||||
[chaincodeName,
|
||||
[componentName,
|
||||
Promise.resolve(GithubCommentInstantiationFactory)],
|
||||
]),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -49,7 +49,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Welcome to your first Chaincode
|
||||
# Welcome to your first Component
|
||||
|
||||
A simple Chaincode example that demonstrates wrapping an existing React Image Gallery control
|
||||
A simple Component example that demonstrates wrapping an existing React Image Gallery control
|
||||
|
||||
## Getting Started
|
||||
You can try the following commands
|
||||
|
|
@ -15,7 +15,7 @@ You can try the following commands
|
|||
|
||||
|
||||
npm deploy
|
||||
Publishes the chaincode to https://packages.wu2.prague.office-int.com/#/
|
||||
Publishes the component to https://packages.wu2.prague.office-int.com/#/
|
||||
````
|
||||
|
||||
We suggest you start by typing:
|
||||
|
|
@ -30,7 +30,7 @@ Uncomment the commented code in index.tsx to add a title to your component.
|
|||
|
||||
## Deploy
|
||||
|
||||
To deploy and make your chaincode "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
To deploy and make your component "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
|
||||
Go to https://packages.wu2.prague.office-int.com
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ To deploy, use
|
|||
npm run deploy
|
||||
|
||||
|
||||
To view your chaincode, you can go to the URL
|
||||
To view your component, you can go to the URL
|
||||
|
||||
https://www.wu2-ppe.prague.office-int.com/loader/stupefied-kilby/prague/{random container name}?chaincode={pkg.name}@{pkg.version};
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: "chaincode/counter",
|
||||
devtoolNamespace: "component/counter",
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -40,7 +40,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ module.exports = env => {
|
|||
library: '[name]',
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: 'chaincode/counter',
|
||||
devtoolNamespace: 'component/counter',
|
||||
libraryTarget: 'umd'
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { ContainerRuntime } from "@microsoft/fluid-container-runtime";
|
|||
import { IComponentFactory, FlushMode } from "@microsoft/fluid-runtime-definitions";
|
||||
import { fluidExport as persona } from "./persona";
|
||||
|
||||
const componentPackage = "@chaincode/persona";
|
||||
const componentPackage = "@component/persona";
|
||||
|
||||
class DrawerDocumentFactory implements IRuntimeFactory {
|
||||
public get IRuntimeFactory() { return this; }
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -41,7 +41,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { Poll } from "./view/Poll";
|
|||
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const pkg = require("../package.json");
|
||||
const chaincodeName = pkg.name;
|
||||
const componentName = pkg.name;
|
||||
|
||||
export class Pollster extends PrimedComponent implements IComponentHTMLVisual {
|
||||
public get IComponentHTMLVisual() { return this; }
|
||||
|
|
@ -49,8 +49,8 @@ export const PollInstantiationFactory = new PrimedComponentFactory(
|
|||
);
|
||||
|
||||
export const fluidExport = new SimpleModuleInstantiationFactory(
|
||||
chaincodeName,
|
||||
componentName,
|
||||
new Map([
|
||||
[chaincodeName, Promise.resolve(PollInstantiationFactory)],
|
||||
[componentName, Promise.resolve(PollInstantiationFactory)],
|
||||
]),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -32,7 +32,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { ContainerRuntime } from "@microsoft/fluid-container-runtime";
|
|||
import { IComponentFactory, FlushMode } from "@microsoft/fluid-runtime-definitions";
|
||||
import { fluidExport as smde } from "./prosemirror";
|
||||
|
||||
const defaultComponent = "@chaincode/prosemirror";
|
||||
const defaultComponent = "@component/prosemirror";
|
||||
|
||||
class ProseMirrorFactory implements IRuntimeFactory {
|
||||
public get IRuntimeFactory() { return this; }
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -41,7 +41,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Simple Component Embed
|
||||
|
||||
This app simply embeds another chaincode. It's meant for reference and not practical purposes.
|
||||
This app simply embeds another component. It's meant for reference and not practical purposes.
|
||||
|
||||
**NOTE that this demo is on 0.2.0 of Prague. This is required if you want to load 0.2.0 components in your component.**
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: "chaincode/counter",
|
||||
devtoolNamespace: "component/counter",
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -14,20 +14,20 @@ This is our core component. It does a few specific things:
|
|||
4. It initializes the Container Runtime.
|
||||
5. It loads all of the other components.
|
||||
|
||||
## [`Button`](./src/localChaincode/Button.tsx)
|
||||
## [`Button`](./src/localComponent/Button.tsx)
|
||||
|
||||
`Button` doesn't manage or display and Fluid state but updates that state on a trigger.
|
||||
|
||||
1. Creates a button in the provided div.
|
||||
2. Increments the counter object on click.
|
||||
|
||||
## [`Incrementor`](./src/localChaincode/Incrementor.tsx)
|
||||
## [`Incrementor`](./src/localComponent/Incrementor.tsx)
|
||||
|
||||
`Incrementor` doesn't manage or have any UI. It simply set's a timer that will update the state of the provided counter. Adding this logic into its own component can be valuable when you need to reuse this logic with multiple other components. It reduces duplication.
|
||||
|
||||
1. Create a timer to randomly increment the counter every 5 seconds.
|
||||
|
||||
## [`TextDisplay`](./src/localChaincode/TextDisplay.tsx)
|
||||
## [`TextDisplay`](./src/localComponent/TextDisplay.tsx)
|
||||
|
||||
`TextDisplay` doesn't modify state but only displays changes.
|
||||
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@ import { Counter, CounterValueType } from "@microsoft/fluid-map";
|
|||
|
||||
// Import our local components
|
||||
// eslint-disable-next-line import/no-internal-modules
|
||||
import { Button, ButtonInstantiationFactory } from "./localChaincode/Button";
|
||||
import { Button, ButtonInstantiationFactory } from "./localComponent/Button";
|
||||
// eslint-disable-next-line import/no-internal-modules
|
||||
import { TextDisplay, TextDisplayInstantiationFactory } from "./localChaincode/TextDisplay";
|
||||
import { TextDisplay, TextDisplayInstantiationFactory } from "./localComponent/TextDisplay";
|
||||
// eslint-disable-next-line import/no-internal-modules
|
||||
import { Incrementor, IncrementorInstantiationFactory } from "./localChaincode/Incrementor";
|
||||
import { Incrementor, IncrementorInstantiationFactory } from "./localComponent/Incrementor";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const pkg = require("../package.json");
|
||||
const chaincodeName = pkg.name;
|
||||
const componentName = pkg.name;
|
||||
|
||||
/**
|
||||
* Simple example of sharing content across components
|
||||
|
|
@ -51,11 +51,11 @@ export class SimpleDataSharing extends PrimedComponent implements IComponentHTML
|
|||
|
||||
// Create a button, textDisplay, and incrementor component
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
this.createAndAttachComponent(this.buttonId, Button.chaincodeName);
|
||||
this.createAndAttachComponent(this.buttonId, Button.componentName);
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
this.createAndAttachComponent(this.textDisplayId, TextDisplay.chaincodeName);
|
||||
this.createAndAttachComponent(this.textDisplayId, TextDisplay.componentName);
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
this.createAndAttachComponent(this.incrementorId, Incrementor.chaincodeName);
|
||||
this.createAndAttachComponent(this.incrementorId, Incrementor.componentName);
|
||||
}
|
||||
|
||||
protected async componentHasInitialized() {
|
||||
|
|
@ -92,11 +92,11 @@ export const SimpleDataSharingInstantiationFactory = new PrimedComponentFactory(
|
|||
);
|
||||
|
||||
export const fluidExport = new SimpleModuleInstantiationFactory(
|
||||
chaincodeName,
|
||||
componentName,
|
||||
new Map([
|
||||
[chaincodeName, Promise.resolve(SimpleDataSharingInstantiationFactory)],
|
||||
[Button.chaincodeName, Promise.resolve(ButtonInstantiationFactory)],
|
||||
[TextDisplay.chaincodeName, Promise.resolve(TextDisplayInstantiationFactory)],
|
||||
[Incrementor.chaincodeName, Promise.resolve(IncrementorInstantiationFactory)],
|
||||
[componentName, Promise.resolve(SimpleDataSharingInstantiationFactory)],
|
||||
[Button.componentName, Promise.resolve(ButtonInstantiationFactory)],
|
||||
[TextDisplay.componentName, Promise.resolve(TextDisplayInstantiationFactory)],
|
||||
[Incrementor.componentName, Promise.resolve(IncrementorInstantiationFactory)],
|
||||
]),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import * as ReactDOM from "react-dom";
|
|||
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const pkg = require("../../package.json");
|
||||
const chaincodeName = pkg.name;
|
||||
const componentName = pkg.name;
|
||||
|
||||
/**
|
||||
* Button does not display any content but modifies the counter count on the button click.
|
||||
|
|
@ -19,7 +19,7 @@ const chaincodeName = pkg.name;
|
|||
export class Button extends PrimedComponent implements IComponentHTMLVisual {
|
||||
public get IComponentHTMLVisual() { return this; }
|
||||
|
||||
public static readonly chaincodeName = `${chaincodeName}/button`;
|
||||
public static readonly componentName = `${componentName}/button`;
|
||||
public counter: Counter;
|
||||
|
||||
public render(div: HTMLDivElement) {
|
||||
|
|
@ -8,7 +8,7 @@ import { Counter } from "@microsoft/fluid-map";
|
|||
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const pkg = require("../../package.json");
|
||||
const chaincodeName = pkg.name;
|
||||
const componentName = pkg.name;
|
||||
|
||||
/**
|
||||
* Not all components need to have ui.
|
||||
|
|
@ -18,7 +18,7 @@ const chaincodeName = pkg.name;
|
|||
* This logic is valuable as a component when you could imagining using it with multiple other components.
|
||||
*/
|
||||
export class Incrementor extends PrimedComponent {
|
||||
public static readonly chaincodeName = `${chaincodeName}/incrementor`;
|
||||
public static readonly componentName = `${componentName}/incrementor`;
|
||||
public counter: Counter;
|
||||
|
||||
protected async componentInitializingFirstTime() {
|
||||
|
|
@ -11,7 +11,7 @@ import * as ReactDOM from "react-dom";
|
|||
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const pkg = require("../../package.json");
|
||||
const chaincodeName = pkg.name;
|
||||
const componentName = pkg.name;
|
||||
|
||||
/**
|
||||
* The TextDisplay does not directly manage or modify content.
|
||||
|
|
@ -19,7 +19,7 @@ const chaincodeName = pkg.name;
|
|||
*/
|
||||
export class TextDisplay extends PrimedComponent implements IComponentHTMLVisual {
|
||||
public get IComponentHTMLVisual() { return this; }
|
||||
public static readonly chaincodeName = `${chaincodeName}/textDisplay`;
|
||||
public static readonly componentName = `${componentName}/textDisplay`;
|
||||
public counter: Counter;
|
||||
|
||||
public render(div: HTMLDivElement) {
|
||||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -32,7 +32,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ class ProgressBarsFactory implements IRuntimeFactory {
|
|||
|
||||
public async instantiateRuntime(context: IContainerContext): Promise<IRuntime> {
|
||||
const registry = new Map<string, Promise<IComponentFactory>>([
|
||||
["@chaincode/smde", Promise.resolve(smde)],
|
||||
["@component/smde", Promise.resolve(smde)],
|
||||
]);
|
||||
|
||||
const defaultComponentId = "default";
|
||||
const defaultComponent = "@chaincode/smde";
|
||||
const defaultComponent = "@component/smde";
|
||||
|
||||
const runtime = await ContainerRuntime.load(
|
||||
context,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -41,7 +41,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -21,17 +21,17 @@ import {
|
|||
} from "./container-services";
|
||||
import { Spaces } from "./spaces";
|
||||
|
||||
const chaincodeName = "spaces";
|
||||
const componentName = "spaces";
|
||||
|
||||
/**
|
||||
* This does setup for the Container. The SimpleModuleInstantiationFactory also enables dynamic loading in the
|
||||
* EmbeddedComponentLoader.
|
||||
*/
|
||||
export const fluidExport = new SimpleModuleInstantiationFactory(
|
||||
chaincodeName,
|
||||
componentName,
|
||||
new Map([
|
||||
[ClickerName, Promise.resolve(ClickerInstantiationFactory)],
|
||||
[chaincodeName, Promise.resolve(Spaces.getFactory())],
|
||||
[componentName, Promise.resolve(Spaces.getFactory())],
|
||||
["button", Promise.resolve(ButtonInstantiationFactory)],
|
||||
["number", Promise.resolve(NumberInstantiationFactory)],
|
||||
["textbox", Promise.resolve(TextBoxInstantiationFactory)],
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Welcome to your first Fluid Chaincode
|
||||
# Welcome to your first Fluid Component
|
||||
|
||||
Welcome to your first chaincode component.
|
||||
Welcome to your first component.
|
||||
|
||||
## Getting Started
|
||||
To start coding, open this directory in your IDE and check out ./src/index.tsx
|
||||
|
|
@ -17,7 +17,7 @@ You can try the following commands
|
|||
|
||||
|
||||
npm run deploy
|
||||
Publishes the chaincode to https://packages.wu2.prague.office-int.com/#/
|
||||
Publishes the component to https://packages.wu2.prague.office-int.com/#/
|
||||
````
|
||||
|
||||
We suggest you start by typing:
|
||||
|
|
@ -32,7 +32,7 @@ Uncomment the commented code in ./src/index.tsx to add a title to your component
|
|||
|
||||
## Deploy
|
||||
|
||||
To deploy and make your chaincode "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
To deploy and make your component "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
|
||||
Go to https://packages.wu2.prague.office-int.com
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ To deploy, use
|
|||
npm run deploy
|
||||
|
||||
|
||||
To view your chaincode, you can go to the URL
|
||||
To view your component, you can go to the URL
|
||||
|
||||
https://www.wu2-ppe.prague.office-int.com/loader/stupefied-kilby/prague/{random container name}?chaincode={pkg.name}@{pkg.version};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { TextareaNoReactInstantiationFactory } from "./main";
|
|||
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const pkg = require("../package.json");
|
||||
export const chaincodeName = pkg.name as string;
|
||||
export const componentName = pkg.name as string;
|
||||
|
||||
/**
|
||||
* This does setup for the Container. The SimpleModuleInstantiationFactory also
|
||||
|
|
@ -22,9 +22,9 @@ export const chaincodeName = pkg.name as string;
|
|||
* 2. Map of string to factory for all components
|
||||
*/
|
||||
export const fluidExport = new SimpleModuleInstantiationFactory(
|
||||
chaincodeName,
|
||||
componentName,
|
||||
new Map([
|
||||
[chaincodeName,
|
||||
[componentName,
|
||||
Promise.resolve(TextareaNoReactInstantiationFactory)],
|
||||
]),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -32,7 +32,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ class TourOfHeroesComponentView implements IComponentHTMLVisual {
|
|||
}
|
||||
}
|
||||
|
||||
// Note on defining components - snapshotting does not seem like it should be part of an IChaincodeComponent given
|
||||
// Note on defining components - snapshotting does not seem like it should be part of an IComponentComponent given
|
||||
// these synthetic components don't need it. We may want this to just be "attach"
|
||||
class GraphIQLView implements IComponentHTMLVisual {
|
||||
public get IComponentHTMLVisual() { return this; }
|
||||
|
|
@ -142,7 +142,7 @@ class GraphIQLView implements IComponentHTMLVisual {
|
|||
}
|
||||
}
|
||||
|
||||
const TourOfHeroesType = "@chaincode/tourofheroes";
|
||||
const TourOfHeroesType = "@component/tourofheroes";
|
||||
const TourOfHeroesInstantiationFactory = new PrimedComponentFactory(TourOfHeroes, []);
|
||||
class TourOfHeroesContainerInstantiationFactory implements IRuntimeFactory, IComponentRegistry, IComponentFactory {
|
||||
public get IComponentFactory() { return this; }
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: "chaincode/tourofheroes",
|
||||
devtoolNamespace: "component/tourofheroes",
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Welcome to your first Fluid Chaincode
|
||||
# Welcome to your first Fluid Component
|
||||
|
||||
Welcome to your first chaincode component.
|
||||
Welcome to your first component.
|
||||
|
||||
## Getting Started
|
||||
To start coding, open this directory in your IDE and check out ./src/index.tsx
|
||||
|
|
@ -17,7 +17,7 @@ You can try the following commands
|
|||
|
||||
|
||||
npm run deploy
|
||||
Publishes the chaincode to https://packages.wu2.prague.office-int.com/#/
|
||||
Publishes the component to https://packages.wu2.prague.office-int.com/#/
|
||||
````
|
||||
|
||||
We suggest you start by typing:
|
||||
|
|
@ -32,7 +32,7 @@ Uncomment the commented code in ./src/index.tsx to add a title to your component
|
|||
|
||||
## Deploy
|
||||
|
||||
To deploy and make your chaincode "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
To deploy and make your component "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
|
||||
Go to https://packages.wu2.prague.office-int.com
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ To deploy, use
|
|||
npm run deploy
|
||||
|
||||
|
||||
To view your chaincode, you can go to the URL
|
||||
To view your component, you can go to the URL
|
||||
|
||||
https://www.wu2-ppe.prague.office-int.com/loader/stupefied-kilby/prague/{random container name}?chaincode={pkg.name}@{pkg.version};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { TyperaceInstantiationFactory as ComponentInstantiationFactory } from ".
|
|||
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const pkg = require("../package.json");
|
||||
const chaincodeName = pkg.name as string;
|
||||
const componentName = pkg.name as string;
|
||||
|
||||
/**
|
||||
* This does setup for the Container. The SimpleModuleInstantiationFactory also enables dynamic loading in the
|
||||
|
|
@ -19,8 +19,8 @@ const chaincodeName = pkg.name as string;
|
|||
* 2. Map of string to factory for all components
|
||||
*/
|
||||
export const fluidExport = new SimpleModuleInstantiationFactory(
|
||||
chaincodeName,
|
||||
componentName,
|
||||
new Map([
|
||||
[chaincodeName, Promise.resolve(ComponentInstantiationFactory)],
|
||||
[componentName, Promise.resolve(ComponentInstantiationFactory)],
|
||||
]),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export class TextGenerator {
|
|||
`This folder contains a script that will get secret values from the prague keyvault and store them as environment variables. In order to have access to the prague keyvault you must be a member of the prague-secrets or WAC Bohemia security group.`,
|
||||
`The loader makes up the minimal kernel of the Fluid runtime. This kernel is responsible for providing access to Fluid storage as well as consensus over a quorum of clients.`,
|
||||
`The consensus system allows clients within the collaboration window to agree on document properties. One example of this is the npm package that should be loaded to process operations applied to the document.`,
|
||||
`The base document channel is 'owned' and run by the chaincode of the loader. It should be versioned and require a specific loader version.`,
|
||||
`The base document channel is 'owned' and run by the component of the loader. It should be versioned and require a specific loader version.`,
|
||||
`Clients within the collaboration window accept the proposal by allowing their reference sequence number to go above the sequence number for the proposal.`,
|
||||
`The proposal enters the commit state when the minimum sequence number goes above the sequence number at which it became accepted. In the commit state all subsequent messages are guaranteed to have been sent with knowledge of the proposal.`,
|
||||
`You can get the url by looking at the kube endpoints that are available in the -n nuclio namespace`,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -45,7 +45,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import {
|
|||
} from "./interfaces";
|
||||
import { Vltava } from "./vltava";
|
||||
|
||||
const chaincodeName = "vltava";
|
||||
const componentName = "vltava";
|
||||
|
||||
export class InternalRegistry implements IComponentRegistry, IComponentRegistryDetails {
|
||||
public get IComponentRegistry() { return this; }
|
||||
|
|
@ -96,7 +96,7 @@ const generateFactory = () => {
|
|||
});
|
||||
|
||||
// We don't want to include the default wrapper component in our list of available components
|
||||
containerComponents.push([ chaincodeName, Promise.resolve(Vltava.getFactory())]);
|
||||
containerComponents.push([ componentName, Promise.resolve(Vltava.getFactory())]);
|
||||
|
||||
const containerRegistries: NamedComponentRegistryEntries = [
|
||||
["", Promise.resolve(new InternalRegistry(containerComponentsDefinition))],
|
||||
|
|
@ -105,7 +105,7 @@ const generateFactory = () => {
|
|||
// TODO: You should be able to specify the default registry instead of just a list of components
|
||||
// and the default registry is already determined Issue:#1138
|
||||
return new SimpleModuleInstantiationFactory(
|
||||
chaincodeName,
|
||||
componentName,
|
||||
[
|
||||
...containerComponents,
|
||||
...containerRegistries,
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export class DocumentFactory {
|
|||
this.loaderDeferred.resolve(loader);
|
||||
}
|
||||
|
||||
public async create(chaincode: IFluidCodeDetails): Promise<string> {
|
||||
public async create(component: IFluidCodeDetails): Promise<string> {
|
||||
const monikerP = new Promise(async (resolve) => {
|
||||
if (this.moniker) {
|
||||
resolve(this.moniker);
|
||||
|
|
@ -62,7 +62,7 @@ export class DocumentFactory {
|
|||
return Promise.reject("Code has already been proposed on document");
|
||||
}
|
||||
|
||||
quorum.propose("code", chaincode);
|
||||
quorum.propose("code", component);
|
||||
|
||||
return url;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export class DocumentFactory {
|
|||
this.loaderDeferred.resolve(loader);
|
||||
}
|
||||
|
||||
public async create(chaincode: IFluidCodeDetails): Promise<string> {
|
||||
public async create(component: IFluidCodeDetails): Promise<string> {
|
||||
const monikerP = new Promise(async (resolve) => {
|
||||
if (this.moniker) {
|
||||
resolve(this.moniker);
|
||||
|
|
@ -61,7 +61,7 @@ export class DocumentFactory {
|
|||
return Promise.reject("Code has already been proposed on document");
|
||||
}
|
||||
|
||||
quorum.propose("code", chaincode);
|
||||
quorum.propose("code", component);
|
||||
|
||||
return url;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,5 +43,5 @@
|
|||
"webpack-dev-server": "^3.8.0",
|
||||
"webpack-merge": "^4.1.2"
|
||||
},
|
||||
"chaincode": "@prague/shared-text@latest"
|
||||
"component": "@prague/shared-text@latest"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,10 @@ import { loadFluidComponent } from "@prague/tiny-web-host";
|
|||
|
||||
export function runner() {
|
||||
|
||||
// TODO #1148 - remove usage of 'chaincode' below
|
||||
// tslint:disable-next-line: max-line-length
|
||||
const url = "https://www.wu2.prague.office-int.com/loader/prague/ChangeThisValue-150320739?chaincode=@chaincode/shared-text@0.6.9051";
|
||||
// Future: buildUrl("@chaincode/shared-text@0.6.9051", "fluid", `ChangeThisValue-${date.getTime()}`);
|
||||
// Future: buildUrl("@component/shared-text@0.6.9051", "fluid", `ChangeThisValue-${date.getTime()}`);
|
||||
|
||||
// Future: Fill in SPO relevant info
|
||||
loadFluidComponent(
|
||||
|
|
@ -22,6 +23,6 @@ export function runner() {
|
|||
);
|
||||
}
|
||||
|
||||
export function buildUrl(chaincode: string, tenant: string, containerId: string) {
|
||||
return `https://www.wu2.prague.office-int.com/loader/${tenant}/${containerId}?chaincode=${chaincode}`;
|
||||
export function buildUrl(component: string, tenant: string, containerId: string) {
|
||||
return `https://www.wu2.prague.office-int.com/loader/${tenant}/${containerId}?chaincode=${component}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ always-auth=false
|
|||
@prague:registry=https://packages.wu2.prague.office-int.com
|
||||
@prague:always-auth=true
|
||||
|
||||
@chaincode:registry=https://packages.wu2.prague.office-int.com
|
||||
@chaincode:always-auth=true
|
||||
@component:registry=https://packages.wu2.prague.office-int.com
|
||||
@component:always-auth=true
|
||||
|
||||
@component:registry=https://packages.wu2.prague.office-int.com
|
||||
@component:always-auth=true
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ npm start
|
|||
|
||||
Then navigate to http://localhost:8080. This will redirect you to http://localhost:8080/example but you can change
|
||||
'example' to any string you'd like and a new document will be created under that name. By default a new Flow View
|
||||
will be created but by specifying the chaincode query parameter any of the packages on
|
||||
will be created but by specifying the component query parameter any of the packages on
|
||||
https://packages.wu2.prague.office-int.com can be loaded - i.e.
|
||||
http://localhost:8080/new-document?chaincode=@chaincode/tourofheroes@0.0.5918.
|
||||
http://localhost:8080/new-document?chaincode=@component/tourofheroes@0.0.5918.
|
||||
|
||||
## The Code
|
||||
|
||||
|
|
@ -186,23 +186,23 @@ The interface for the loader is also simple.
|
|||
|
||||
```typescript
|
||||
export interface ICodeLoader {
|
||||
load(source: string): Promise<IChaincodeFactory>;
|
||||
load(source: string): Promise<IComponentFactory>;
|
||||
}
|
||||
```
|
||||
|
||||
load takes in a source string. Today this is a NPM package. But similar to npm package references is expected to
|
||||
grow into git repos, tarballs, CDN links, etc...
|
||||
|
||||
The IChaincodeFactory is a simple interface that defines the entry point function the loader expects the code
|
||||
The IComponentFactory is a simple interface that defines the entry point function the loader expects the code
|
||||
package to export.
|
||||
|
||||
```typescript
|
||||
export interface IChaincodeFactory {
|
||||
export interface IComponentFactory {
|
||||
instantiateRuntime(context: IContainerContext): Promise<IRuntime>;
|
||||
}
|
||||
```
|
||||
|
||||
Once the `IChaincodeFactory` is returned the loader then invokes the instantiateRuntime call to load the code package.
|
||||
Once the `IComponentFactory` is returned the loader then invokes the instantiateRuntime call to load the code package.
|
||||
|
||||
### Loading a Fluid document
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { IUser } from "@microsoft/fluid-protocol-definitions";
|
|||
import { RouterliciousDocumentServiceFactory } from "@microsoft/fluid-routerlicious-driver";
|
||||
import { extractDetails, WebCodeLoader, WhiteList } from "@microsoft/fluid-web-code-loader";
|
||||
import { InsecureUrlResolver } from "./urlResolver";
|
||||
import { attach, initializeChaincode, parsePackageName } from "./utils";
|
||||
import { attach, initializeComponent, parsePackageName } from "./utils";
|
||||
|
||||
// Base service configuration.
|
||||
const ordererUrl = "http://localhost:3000";
|
||||
|
|
@ -88,8 +88,8 @@ export async function start(url: string, code: string): Promise<void> {
|
|||
package: code,
|
||||
};
|
||||
|
||||
await initializeChaincode(fluidDocument, details)
|
||||
.catch((error) => console.error("chaincode error", error));
|
||||
await initializeComponent(fluidDocument, details)
|
||||
.catch((error) => console.error("component error", error));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ import { Container, Loader } from "@microsoft/fluid-container-loader";
|
|||
import { parse } from "querystring";
|
||||
|
||||
/**
|
||||
* The initializeChaincode method takes in a document and a desired NPM package and establishes a code quorum
|
||||
* The initializeComponent method takes in a document and a desired NPM package and establishes a code quorum
|
||||
* on this package.
|
||||
*/
|
||||
export async function initializeChaincode(document: Container, pkg: IFluidCodeDetails): Promise<void> {
|
||||
export async function initializeComponent(document: Container, pkg: IFluidCodeDetails): Promise<void> {
|
||||
if (!pkg) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -68,5 +68,5 @@ export async function attach(loader: Loader, container: Container, url: string,
|
|||
|
||||
export function parsePackageName(url: Location, defaultPkg: string): string {
|
||||
const parsed = parse(url.search.substr(1));
|
||||
return parsed.chaincode ? parsed.chaincode as string : defaultPkg;
|
||||
return parsed.component ? parsed.component as string : defaultPkg;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@fluid-example/flow-intel-viewer",
|
||||
"version": "0.14.0",
|
||||
"description": "Chaincode for viewing insights in flow-scroll",
|
||||
"description": "Component for viewing insights in flow-scroll",
|
||||
"repository": "microsoft/FluidFramework",
|
||||
"license": "MIT",
|
||||
"author": "Microsoft",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: "chaincode/counter",
|
||||
devtoolNamespace: "component/counter",
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ export class BlobManager implements IBlobManager {
|
|||
}
|
||||
|
||||
/**
|
||||
* Instantiates a new chaincode component
|
||||
* Instantiates a new component
|
||||
*/
|
||||
export function instantiateComponent(context: IComponentContext): void {
|
||||
const modules = new Map<string, any>();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -31,7 +31,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: "chaincode/canvas",
|
||||
devtoolNamespace: "component/canvas",
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: "chaincode/counter",
|
||||
devtoolNamespace: "component/counter",
|
||||
// This is required to run webpacked code in webworker/node
|
||||
// https://github.com/webpack/webpack/issues/6522
|
||||
globalObject: "(typeof self !== 'undefined' ? self : this)",
|
||||
|
|
|
|||
|
|
@ -4530,11 +4530,11 @@ export class FlowView extends ui.Component implements SearchMenu.ISearchMenuHost
|
|||
}
|
||||
}
|
||||
|
||||
public insertComponentNew(prefix: string, chaincode: string, inline = false) {
|
||||
public insertComponentNew(prefix: string, component: string, inline = false) {
|
||||
const id = `${prefix}-${Date.now()}`;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
this.collabDocument.runtime.createAndAttachComponent(id, chaincode);
|
||||
this.collabDocument.runtime.createAndAttachComponent(id, component);
|
||||
|
||||
const props = {
|
||||
crefTest: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Welcome to your first Fluid Chaincode
|
||||
# Welcome to your first Fluid Component
|
||||
|
||||
Welcome to your first chaincode component.
|
||||
Welcome to your first component.
|
||||
|
||||
## Getting Started
|
||||
To start coding, open this directory in your IDE and check out ./src/index.tsx
|
||||
|
|
@ -17,7 +17,7 @@ You can try the following commands
|
|||
|
||||
|
||||
npm run deploy
|
||||
Publishes the chaincode to https://packages.wu2.prague.office-int.com/#/
|
||||
Publishes the component to https://packages.wu2.prague.office-int.com/#/
|
||||
````
|
||||
|
||||
We suggest you start by typing:
|
||||
|
|
@ -32,7 +32,7 @@ Uncomment the commented code in ./src/index.tsx to add a title to your component
|
|||
|
||||
## Deploy
|
||||
|
||||
To deploy and make your chaincode "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
To deploy and make your component "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
|
||||
Go to https://packages.wu2.prague.office-int.com
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ To deploy, use
|
|||
npm run deploy
|
||||
|
||||
|
||||
To view your chaincode, you can go to the URL
|
||||
To view your component, you can go to the URL
|
||||
|
||||
https://www.wu2-ppe.prague.office-int.com/waterpark?chaincode={pkg.name}@{pkg.version};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -32,7 +32,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -31,7 +31,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
import { SimpleModuleInstantiationFactory } from "@microsoft/fluid-aqueduct";
|
||||
|
||||
export const webflowType = "@fluid-example/webflow";
|
||||
export const FlowDocumentType = "@chaincode/flow-document";
|
||||
export const FlowDocumentType = "@component/flow-document";
|
||||
|
||||
export const fluidExport = new SimpleModuleInstantiationFactory(
|
||||
webflowType,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@fluid-example/math",
|
||||
"version": "0.14.0",
|
||||
"description": "Chaincode component that provides math.",
|
||||
"description": "Component component that provides math.",
|
||||
"repository": "microsoft/FluidFramework",
|
||||
"license": "MIT",
|
||||
"author": "Microsoft",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -54,7 +54,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { PrimedComponentFactory, SimpleModuleInstantiationFactory } from "@micro
|
|||
import { IProvideRuntimeFactory } from "@microsoft/fluid-container-definitions";
|
||||
import { IProvideComponentFactory } from "@microsoft/fluid-runtime-definitions";
|
||||
import * as sequence from "@microsoft/fluid-sequence";
|
||||
import { MonacoRunner } from "./chaincode";
|
||||
import { MonacoRunner } from "./component";
|
||||
|
||||
const componentFactory = new PrimedComponentFactory(
|
||||
MonacoRunner,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@fluid-example/owned-map",
|
||||
"version": "0.14.0",
|
||||
"description": "Chaincode starter project",
|
||||
"description": "Component starter project",
|
||||
"repository": "microsoft/FluidFramework",
|
||||
"license": "MIT",
|
||||
"author": "Microsoft",
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: "chaincode/counter",
|
||||
devtoolNamespace: "component/counter",
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ You can try the following commands
|
|||
|
||||
|
||||
npm run deploy
|
||||
Publishes the chaincode to https://packages.wu2.prague.office-int.com/#/
|
||||
Publishes the component to https://packages.wu2.prague.office-int.com/#/
|
||||
```
|
||||
|
||||
We suggest you start by typing:
|
||||
|
|
@ -29,7 +29,7 @@ npm start
|
|||
|
||||
## Deploy
|
||||
|
||||
To deploy and make your chaincode "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
To deploy and make your component "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
|
||||
Go to https://packages.wu2.prague.office-int.com
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ To deploy, use
|
|||
npm run deploy
|
||||
```
|
||||
|
||||
To view your chaincode, you can go to the URL
|
||||
To view your component, you can go to the URL
|
||||
|
||||
> https://www.wu2-ppe.prague.office-int.com/waterpark?chaincode={pkg.name}@{pkg.version};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -32,7 +32,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Welcome to your first Fluid Chaincode
|
||||
# Welcome to your first Fluid Component
|
||||
|
||||
Welcome to your first chaincode component.
|
||||
Welcome to your first component.
|
||||
|
||||
## Getting Started
|
||||
To start coding, open this directory in your IDE and check out ./src/index.tsx
|
||||
|
|
@ -17,7 +17,7 @@ You can try the following commands
|
|||
|
||||
|
||||
npm run deploy
|
||||
Publishes the chaincode to https://packages.wu2.prague.office-int.com/#/
|
||||
Publishes the component to https://packages.wu2.prague.office-int.com/#/
|
||||
````
|
||||
|
||||
We suggest you start by typing:
|
||||
|
|
@ -32,7 +32,7 @@ Uncomment the commented code in ./src/index.tsx to add a title to your component
|
|||
|
||||
## Deploy
|
||||
|
||||
To deploy and make your chaincode "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
To deploy and make your component "Live" you'll have to deploy it to verdaccio, our private NPM repository.
|
||||
|
||||
Go to https://packages.wu2.prague.office-int.com
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ To deploy, use
|
|||
npm run deploy
|
||||
|
||||
|
||||
To view your chaincode, you can go to the URL
|
||||
To view your component, you can go to the URL
|
||||
|
||||
https://www.wu2-ppe.prague.office-int.com/waterpark?chaincode={pkg.name}@{pkg.version};
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -47,7 +47,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export class Scoreboard extends PrimedComponent implements IComponentHTMLVisual
|
|||
*/
|
||||
protected async componentInitializingFirstTime() {
|
||||
this.root.createValueType("Hardcoders", CounterValueType.Name, 0);
|
||||
this.root.createValueType("Chaincoders", CounterValueType.Name, 0);
|
||||
this.root.createValueType("Componentrs", CounterValueType.Name, 0);
|
||||
}
|
||||
|
||||
render(hostingElement: HTMLElement, options?: IComponentHTMLOptions): void {
|
||||
|
|
@ -34,7 +34,7 @@ export class Scoreboard extends PrimedComponent implements IComponentHTMLVisual
|
|||
Scoreboard
|
||||
</h1>
|
||||
<h2 className="subtitle">
|
||||
Hardcoders vs. Chaincoders
|
||||
Hardcoders vs. Componentrs
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,8 +48,8 @@ export class Scoreboard extends PrimedComponent implements IComponentHTMLVisual
|
|||
</div>
|
||||
<div className="column">
|
||||
<TeamScore
|
||||
name="Chaincoders"
|
||||
counter={this.root.get("Chaincoders")}
|
||||
name="Componentrs"
|
||||
counter={this.root.get("Componentrs")}
|
||||
colorClass="has-background-grey-light" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -48,7 +48,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
node: {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -48,7 +48,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import * as React from "react";
|
|||
import * as ReactDOM from "react-dom";
|
||||
import { GraphQLService } from "./database";
|
||||
|
||||
// Note on defining components - snapshotting does not seem like it should be part of an IChaincodeComponent given
|
||||
// Note on defining components - snapshotting does not seem like it should be part of an IComponentComponent given
|
||||
// these synthetic components don't need it. We may want this to just be "attach"
|
||||
export class GraphIQLView extends EventEmitter implements IComponentHTMLVisual {
|
||||
public readonly id = "graphiql";
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ class SharedTextFactoryComponent implements IComponentFactory, IRuntimeFactory {
|
|||
}
|
||||
|
||||
/**
|
||||
* Instantiates a new chaincode host
|
||||
* Instantiates a new component host
|
||||
*/
|
||||
public async instantiateRuntime(context: IContainerContext): Promise<IRuntime> {
|
||||
const runtime = await ContainerRuntime.load(
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import "mocha";
|
|||
import { SourceDocument } from "../src/document";
|
||||
|
||||
// tslint:disable:mocha-no-side-effect-code
|
||||
const sourceDocumentType = "@chaincode/source-document";
|
||||
const sourceDocumentType = "@component/source-document";
|
||||
const sourceDocumentFactory = new PrimedComponentFactory(SourceDocument, [new SharedStringFactory()]);
|
||||
// tslint:enable:mocha-no-side-effect-code
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@fluid-example/table-document",
|
||||
"version": "0.14.0",
|
||||
"description": "Chaincode component containing a table's data",
|
||||
"description": "Component component containing a table's data",
|
||||
"repository": "microsoft/FluidFramework",
|
||||
"license": "MIT",
|
||||
"author": "Microsoft",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@fluid-example/table-view",
|
||||
"version": "0.14.0",
|
||||
"description": "Chaincode component that provides a view for a table-document.",
|
||||
"description": "Component component that provides a view for a table-document.",
|
||||
"repository": "microsoft/FluidFramework",
|
||||
"license": "MIT",
|
||||
"author": "Microsoft",
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ You can try the following commands
|
|||
|
||||
|
||||
npm run deploy
|
||||
Publishes the chaincode to https://packages.wu2.prague.office-int.com/#/
|
||||
Publishes the component to https://packages.wu2.prague.office-int.com/#/
|
||||
```
|
||||
|
||||
We suggest you start by typing:
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env && env.production;
|
||||
|
|
@ -32,7 +32,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const path = require("path");
|
|||
const merge = require("webpack-merge");
|
||||
|
||||
const pkg = require("./package.json");
|
||||
const chaincodeName = pkg.name.slice(1);
|
||||
const componentName = pkg.name.slice(1);
|
||||
|
||||
module.exports = env => {
|
||||
const isProduction = env === "production";
|
||||
|
|
@ -31,7 +31,7 @@ module.exports = env => {
|
|||
library: "[name]",
|
||||
// https://github.com/webpack/webpack/issues/5767
|
||||
// https://github.com/webpack/webpack/issues/7939
|
||||
devtoolNamespace: chaincodeName,
|
||||
devtoolNamespace: componentName,
|
||||
libraryTarget: "umd"
|
||||
},
|
||||
devServer: {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
import { SimpleModuleInstantiationFactory } from "@microsoft/fluid-aqueduct";
|
||||
|
||||
export const WebFlowType = "@fluid-example/webflow";
|
||||
export const FlowDocumentType = "@chaincode/flow-document";
|
||||
export const FlowDocumentType = "@component/flow-document";
|
||||
|
||||
export const fluidExport = new SimpleModuleInstantiationFactory(
|
||||
WebFlowType,
|
||||
|
|
|
|||
|
|
@ -25,12 +25,12 @@ export class SimpleContainerRuntimeFactory {
|
|||
*/
|
||||
public static async instantiateRuntime(
|
||||
context: IContainerContext,
|
||||
chaincode: string,
|
||||
component: string,
|
||||
registryEntries: NamedComponentRegistryEntries,
|
||||
serviceRegistry: ContainerServiceRegistryEntries = [],
|
||||
requestHandlers: RuntimeRequestHandler[] = [],
|
||||
): Promise<ContainerRuntime> {
|
||||
// Debug(`instantiateRuntime(chaincode=${chaincode},registry=${JSON.stringify(registry)})`);
|
||||
// Debug(`instantiateRuntime(component=${component},registry=${JSON.stringify(registry)})`);
|
||||
const runtime = await ContainerRuntime.load(
|
||||
context,
|
||||
registryEntries,
|
||||
|
|
@ -45,10 +45,10 @@ export class SimpleContainerRuntimeFactory {
|
|||
|
||||
// On first boot create the base component
|
||||
if (!runtime.existing) {
|
||||
// Debug(`createAndAttachComponent(chaincode=${chaincode})`);
|
||||
// Debug(`createAndAttachComponent(component=${component})`);
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
SimpleContainerRuntimeFactory.createAndAttachComponent(
|
||||
runtime, SimpleContainerRuntimeFactory.defaultComponentId, chaincode);
|
||||
runtime, SimpleContainerRuntimeFactory.defaultComponentId, component);
|
||||
}
|
||||
|
||||
return runtime;
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ Choosing between the options above might require user input.
|
|||
|
||||
Components may implement **IComponentClipboardConsumer.getComponentFromClipboardHTML** to provide an
|
||||
alternate component identifier to be instantiated during the paste operation. This alternate component
|
||||
should be instantiated on paste instead of the original component component identifier that was serialized
|
||||
should be instantiated on paste instead of the original component identifier that was serialized
|
||||
on copy. In essence, the first instantiated component (serialized component identifier) may act as a
|
||||
factory for the component that will actually be instantiated.
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export interface IProvideComponentClipboardConsumer {
|
|||
*
|
||||
* Components may implement **IComponentClipboardConsumer.getComponentFromClipboardHTML** to provide an
|
||||
* alternate component identifier to be instantiated during the paste operation. This alternate component
|
||||
* should be instantiated on paste instead of the original component component identifier that was serialized
|
||||
* should be instantiated on paste instead of the original component identifier that was serialized
|
||||
* on copy. In essence, the first instantiated component (serialized component identifier) may act as a
|
||||
* factory for the component that will actually be instantiated.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ async function getComponentAndRender(loader: Loader, url: string, div: HTMLDivEl
|
|||
}
|
||||
}
|
||||
|
||||
async function initializeChaincode(container: Container, pkg?: IFluidCodeDetails): Promise<void> {
|
||||
async function initializeComponent(container: Container, pkg?: IFluidCodeDetails): Promise<void> {
|
||||
if (!pkg) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -62,7 +62,7 @@ async function initializeChaincode(container: Container, pkg?: IFluidCodeDetails
|
|||
* @param hostConfig - Config specifying the resolver/factory to be used.
|
||||
* @param resolved - A resolved url from a url resolver.
|
||||
* @param pkg - A resolved package with cdn links.
|
||||
* @param scriptIds - The script tags the chaincode are attached to the view with.
|
||||
* @param scriptIds - The script tags the component are attached to the view with.
|
||||
*/
|
||||
async function createWebLoader(
|
||||
hostConfig: IBaseHostConfig,
|
||||
|
|
@ -71,7 +71,7 @@ async function createWebLoader(
|
|||
scriptIds: string[],
|
||||
): Promise<Loader> {
|
||||
|
||||
// Create the web loader and prefetch the chaincode we will need
|
||||
// Create the web loader and prefetch the component we will need
|
||||
const codeLoader = new WebCodeLoader(hostConfig.whiteList);
|
||||
if (pkg) {
|
||||
if (pkg.pkg) { // This is an IFluidPackage
|
||||
|
|
@ -111,12 +111,12 @@ async function createWebLoader(
|
|||
|
||||
export class BaseHost {
|
||||
/**
|
||||
* Function to load the container from the given url and initialize the chaincode.
|
||||
* Function to load the container from the given url and initialize the component.
|
||||
* @param hostConfig - Config specifying the resolver/factory and other loader settings to be used.
|
||||
* @param url - Url of the Fluid component to be loaded.
|
||||
* @param resolved - A resolved url from a url resolver.
|
||||
* @param pkg - A resolved package with cdn links.
|
||||
* @param scriptIds - The script tags the chaincode are attached to the view with.
|
||||
* @param scriptIds - The script tags the component are attached to the view with.
|
||||
* @param div - The div to load the component into.
|
||||
*/
|
||||
public static async start(
|
||||
|
|
@ -160,11 +160,11 @@ export class BaseHost {
|
|||
});
|
||||
await getComponentAndRender(loader, url, div);
|
||||
|
||||
// If this is a new document we will go and instantiate the chaincode. For old documents we assume a legacy
|
||||
// If this is a new document we will go and instantiate the component. For old documents we assume a legacy
|
||||
// package.
|
||||
if (!container.existing) {
|
||||
await initializeChaincode(container, pkg)
|
||||
.catch((error) => console.error("chaincode error", error));
|
||||
await initializeComponent(container, pkg)
|
||||
.catch((error) => console.error("component error", error));
|
||||
}
|
||||
|
||||
return container;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export interface IProvideDocumentFactory {
|
|||
}
|
||||
|
||||
export interface IDocumentFactory extends IProvideDocumentFactory {
|
||||
create(chaincode: IFluidCodeDetails): Promise<string>;
|
||||
create(component: IFluidCodeDetails): Promise<string>;
|
||||
}
|
||||
|
||||
declare module "@microsoft/fluid-component-core-interfaces" {
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const appTenants = [
|
|||
* @param getToken - A function that either returns an SPO token, or a Routerlicious tenant token
|
||||
* @param clientId - The SPO clientId
|
||||
* @param clientSecret - The SPO clientSecret
|
||||
* @param scriptIds - the script tags the chaincode are attached to the view with
|
||||
* @param scriptIds - the script tags the component are attached to the view with
|
||||
*/
|
||||
export async function loadFluidContainer(
|
||||
url: string,
|
||||
|
|
@ -100,23 +100,23 @@ export function parseUrlToResolvedPackage(url: string): IResolvedPackage {
|
|||
|
||||
const urlRequest = new URL(url);
|
||||
const searchParams = urlRequest.searchParams;
|
||||
const chaincode = searchParams.get("chaincode");
|
||||
const component = searchParams.get("component");
|
||||
|
||||
const cdn = searchParams.get("cdn") ?
|
||||
searchParams.get("cdn") : "https://pragueauspkn-3873244262.azureedge.net";
|
||||
const entryPoint = searchParams.get("entrypoint");
|
||||
let codeDetails: IFluidCodeDetails;
|
||||
|
||||
if (chaincode.startsWith("http")) {
|
||||
if (component.startsWith("http")) {
|
||||
codeDetails = {
|
||||
config: {
|
||||
[`@gateway:cdn`]: chaincode,
|
||||
[`@gateway:cdn`]: component,
|
||||
},
|
||||
package: {
|
||||
fluid: {
|
||||
browser: {
|
||||
umd: {
|
||||
files: [chaincode],
|
||||
files: [component],
|
||||
library: entryPoint,
|
||||
},
|
||||
},
|
||||
|
|
@ -126,12 +126,12 @@ export function parseUrlToResolvedPackage(url: string): IResolvedPackage {
|
|||
},
|
||||
};
|
||||
} else {
|
||||
const details = extractDetails(chaincode);
|
||||
const details = extractDetails(component);
|
||||
codeDetails = {
|
||||
config: {
|
||||
[`@${details.scope}:cdn`]: cdn,
|
||||
},
|
||||
package: chaincode,
|
||||
package: component,
|
||||
};
|
||||
}
|
||||
pkg.details = codeDetails;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ example of this is the npm package that should be loaded to process operations a
|
|||
|
||||
## Document and channels
|
||||
|
||||
The base document channel is 'owned' and run by the chaincode of the loader. It should be versioned and require
|
||||
The base document channel is 'owned' and run by the component of the loader. It should be versioned and require
|
||||
a specific loader version.
|
||||
|
||||
The channels of the document run separate code as defined by the consensus field. It's possible we could further
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ example of this is the npm package that should be loaded to process operations a
|
|||
|
||||
## Document and channels
|
||||
|
||||
The base document channel is 'owned' and run by the chaincode of the loader. It should be versioned and require
|
||||
The base document channel is 'owned' and run by the component of the loader. It should be versioned and require
|
||||
a specific loader version.
|
||||
|
||||
The channels of the document run separate code as defined by the consensus field. It's possible we could further
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче