diff --git a/.bitmap b/.bitmap index 89c48ad6e29f..1442edffc375 100644 --- a/.bitmap +++ b/.bitmap @@ -821,13 +821,6 @@ "mainFile": "index.ts", "rootDir": "scopes/harmony/host-initializer" }, - "html": { - "name": "html", - "scope": "teambit.html", - "version": "1.0.509", - "mainFile": "index.ts", - "rootDir": "scopes/html/html" - }, "importer": { "name": "importer", "scope": "teambit.scope", @@ -2348,4 +2341,4 @@ "rootDir": "scopes/dependencies/yarn" }, "$schema-version": "17.0.0" -} \ No newline at end of file +} diff --git a/scopes/harmony/bit/manifests.ts b/scopes/harmony/bit/manifests.ts index f994d76f5305..f393213ff496 100644 --- a/scopes/harmony/bit/manifests.ts +++ b/scopes/harmony/bit/manifests.ts @@ -68,7 +68,6 @@ import { ExportAspect } from '@teambit/export'; import { ImporterAspect } from '@teambit/importer'; import { EjectAspect } from '@teambit/eject'; import { UserAgentAspect } from '@teambit/user-agent'; -import { HtmlAspect } from '@teambit/html'; import { LanesAspect } from '@teambit/lanes'; import { ForkingAspect } from '@teambit/forking'; import { RenamingAspect } from '@teambit/renaming'; @@ -181,7 +180,6 @@ export const manifestsMap = { [UserAgentAspect.id]: UserAgentAspect, [ApplicationAspect.id]: ApplicationAspect, [EjectAspect.id]: EjectAspect, - [HtmlAspect.id]: HtmlAspect, [LanesAspect.id]: LanesAspect, [ForkingAspect.id]: ForkingAspect, [RenamingAspect.id]: RenamingAspect, diff --git a/scopes/html/html/esm.mjs b/scopes/html/html/esm.mjs deleted file mode 100644 index 4d7d7dabb30b..000000000000 --- a/scopes/html/html/esm.mjs +++ /dev/null @@ -1,8 +0,0 @@ -// eslint-disable-next-line import/no-unresolved -import cjsModule from './index.js'; - -export const HtmlAspect = cjsModule.HtmlAspect; -export const HtmlEnv = cjsModule.HtmlEnv; -export const Html = cjsModule.Html; - -export default cjsModule; diff --git a/scopes/html/html/html-docs-app.ts b/scopes/html/html/html-docs-app.ts deleted file mode 100644 index f868eb549165..000000000000 --- a/scopes/html/html/html-docs-app.ts +++ /dev/null @@ -1,17 +0,0 @@ -import mapObject from 'map-obj'; -import { DocsRootProps } from '@teambit/docs'; -import DocsRoot from '@teambit/react.ui.docs-app'; -import { htmlToReact } from './html-to-react'; - -const htmlDocsRoot = function ({ compositions = {}, ...rest }: DocsRootProps) { - // should be mapObject, Record any>> - // @ts-ignore TODO fix - const reactCompositions = mapObject(compositions, (key, value) => [key, htmlToReact(value as HTMLElement)]); - - return DocsRoot({ compositions: reactCompositions, ...rest }); -}; - -// for backwards compatibility while users update their - can be removed by end of 2022 -htmlDocsRoot.apiObject = true; - -export default htmlDocsRoot; diff --git a/scopes/html/html/html-to-react.tsx b/scopes/html/html/html-to-react.tsx deleted file mode 100644 index f417ad25341e..000000000000 --- a/scopes/html/html/html-to-react.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { useRef, useEffect } from 'react'; -import { RenderHtmlComposition } from './render-composition'; - -/** - * Adapter that converts html elements to react elements - * @param element - */ -export function htmlToReact(element: HTMLElement) { - return function HtmlReact() { - const ref = useRef(null); - useEffect(() => { - RenderHtmlComposition(ref.current, element); - }, []); - return
; - }; -} diff --git a/scopes/html/html/html.aspect.ts b/scopes/html/html/html.aspect.ts deleted file mode 100644 index c1c5b7830dd9..000000000000 --- a/scopes/html/html/html.aspect.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Aspect } from '@teambit/harmony'; - -export const HtmlAspect = Aspect.create({ - id: 'teambit.html/html', - defaultConfig: {}, -}); diff --git a/scopes/html/html/html.composition.tsx b/scopes/html/html/html.composition.tsx deleted file mode 100644 index b35b6c482d80..000000000000 --- a/scopes/html/html/html.composition.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export const Logo = () => ( -
- -
-); diff --git a/scopes/html/html/html.docs.mdx b/scopes/html/html/html.docs.mdx deleted file mode 100644 index 163411391c34..000000000000 --- a/scopes/html/html/html.docs.mdx +++ /dev/null @@ -1,8 +0,0 @@ ---- -description: An env for vanilla JS components (in the browser) -labels: ['docs', 'aspect', 'extensions', 'html', 'environment', 'framework-less', 'vanillajs', 'vanilla js'] ---- - -import { Html } from '@teambit/html.aspect-docs.html'; - - diff --git a/scopes/html/html/html.env.ts b/scopes/html/html/html.env.ts deleted file mode 100644 index 48bc24fc9c62..000000000000 --- a/scopes/html/html/html.env.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Environment } from '@teambit/envs'; -import { COMPONENT_PREVIEW_STRATEGY_NAME, PreviewStrategyName } from '@teambit/preview'; - -export const HtmlEnvType = 'html'; - -export class HtmlEnv implements Environment { - icon = 'https://static.bit.dev/file_type_html5.svg'; - - getDocsTemplate() { - return require.resolve('./html-docs-app'); - } - - getMounter() { - return require.resolve('./mount'); - } - - getDependencies() { - return { - devDependencies: { - '@types/jest': '26.0.20', - }, - }; - } - - getPreviewConfig() { - return { - strategyName: COMPONENT_PREVIEW_STRATEGY_NAME as PreviewStrategyName, - splitComponentBundle: true, - }; - } - - async __getDescriptor() { - return { - type: HtmlEnvType, - }; - } -} diff --git a/scopes/html/html/html.main.runtime.ts b/scopes/html/html/html.main.runtime.ts deleted file mode 100644 index c1e4e2f5dbc7..000000000000 --- a/scopes/html/html/html.main.runtime.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { TsConfigSourceFile } from 'typescript'; -import type { TsCompilerOptionsWithoutTsConfig } from '@teambit/typescript'; -import { BuildTask } from '@teambit/builder'; -import { merge } from 'lodash'; -import { Compiler } from '@teambit/compiler'; -import { PackageJsonProps } from '@teambit/pkg'; -import { EnvPolicyConfigObject } from '@teambit/dependency-resolver'; -import { MainRuntime } from '@teambit/cli'; -import { EnvsAspect, EnvsMain, EnvTransformer, Environment } from '@teambit/envs'; -import { ReactAspect, ReactEnv, ReactMain } from '@teambit/react'; -import { HtmlAspect } from './html.aspect'; -import { HtmlEnv } from './html.env'; - -export class HtmlMain { - constructor( - private react: ReactMain, - - readonly htmlEnv: HtmlEnv, - - private envs: EnvsMain - ) {} - static slots = []; - static dependencies = [EnvsAspect, ReactAspect]; - static runtime = MainRuntime; - - /** - * @deprecated use useTypescript() - * override the TS config of the environment. - */ - overrideTsConfig: ( - tsconfig: TsConfigSourceFile, - compilerOptions?: Partial, - tsModule?: any - ) => EnvTransformer = this.react.overrideTsConfig.bind(this.react); - - /** - * override the jest config of the environment. - */ - overrideJestConfig = this.react.overrideJestConfig.bind(this.react); - - /** - * override the env build pipeline. - */ - overrideBuildPipe: (tasks: BuildTask[]) => EnvTransformer = this.react.overrideBuildPipe.bind(this.react); - - /** - * override the env compilers list. - */ - overrideCompiler: (compiler: Compiler) => EnvTransformer = this.react.overrideCompiler.bind(this.react); - - /** - * override the env compilers tasks in the build pipe. - */ - overrideCompilerTasks: (tasks: BuildTask[]) => EnvTransformer = this.react.overrideCompilerTasks.bind(this.react); - - /** - * @deprecated use useTypescript() - * override the build ts config. - */ - overrideBuildTsConfig: ( - tsconfig: any, - compilerOptions?: Partial - ) => EnvTransformer = this.react.overrideBuildTsConfig.bind(this.react); - - /** - * override package json properties. - */ - overridePackageJsonProps: (props: PackageJsonProps) => EnvTransformer = this.react.overridePackageJsonProps.bind( - this.react - ); - - /** - * override the env's typescript config for both dev and build time. - * Replaces both overrideTsConfig (devConfig) and overrideBuildTsConfig (buildConfig) - */ - useTypescript = this.react.useTypescript.bind(this.react); - - /** - * override the env's dev server and preview webpack configurations. - * Replaces both overrideDevServerConfig and overridePreviewConfig - */ - useWebpack = this.react.useWebpack.bind(this.react); - - /** - * An API to mutate the prettier config - */ - usePrettier = this.react.usePrettier.bind(this.react); - - /** - * An API to mutate the eslint config - */ - useEslint = this.react.useEslint.bind(this.react); - - /** - * override the dependency configuration of the component environment. - */ - overrideDependencies(dependencyPolicy: EnvPolicyConfigObject) { - return this.envs.override({ - getDependencies: () => merge(this.htmlEnv.getDependencies(), dependencyPolicy), - }); - } - - /** - * create a new composition of the html environment. - */ - compose(transformers: EnvTransformer[], targetEnv: Environment = {}) { - return this.envs.compose(this.envs.merge(targetEnv, this.htmlEnv), transformers); - } - - static async provider([envs, react]: [EnvsMain, ReactMain]) { - // config, - // slots, - // harmony: Harmony - const htmlEnv: HtmlEnv = envs.merge(new HtmlEnv(), react.reactEnv); - envs.registerEnv(htmlEnv); - // if (generator) { - // const envContext = new EnvContext(ComponentID.fromString(ReactAspect.id), loggerAspect, workerMain, harmony); - // generator.registerComponentTemplate(getTemplates(envContext)); - // } - - return new HtmlMain(react, htmlEnv, envs); - } -} - -HtmlAspect.addRuntime(HtmlMain); diff --git a/scopes/html/html/html.templates.ts b/scopes/html/html/html.templates.ts deleted file mode 100644 index 603bb899b737..000000000000 --- a/scopes/html/html/html.templates.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { HtmlTemplate, ScssTemplate, CssTemplate, HtmlEnvTemplate } from '@teambit/html.generator.html-templates'; -import { EnvContext } from '@teambit/envs'; -import { ComponentTemplate, TemplateList } from '@teambit/generator'; - -const templateListHandler = TemplateList.from([ - HtmlTemplate.from({ env: 'teambit.html/html-env' }), - ScssTemplate.from({ env: 'teambit.html/html-env' }), - CssTemplate.from({ env: 'teambit.html/html-env' }), - HtmlEnvTemplate.from({}), -]); - -export function getTemplates(envContext: EnvContext): ComponentTemplate[] { - const templateList = templateListHandler(envContext); - return templateList.compute(); -} diff --git a/scopes/html/html/index.ts b/scopes/html/html/index.ts deleted file mode 100644 index 449988a6a089..000000000000 --- a/scopes/html/html/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { HtmlAspect } from './html.aspect'; - -export { HtmlEnv } from './html.env'; -export type { HtmlMain } from './html.main.runtime'; -export type { HtmlComposition, HtmlFunctionComposition } from './interfaces'; -// @ts-ignore unclear why it starts failing with "Cannot find module './html.docs.mdx' or its corresponding type declarations" -export { default as Html } from './html.docs.mdx'; -export default HtmlAspect; -export { HtmlAspect }; diff --git a/scopes/html/html/interfaces.ts b/scopes/html/html/interfaces.ts deleted file mode 100644 index ad3ada18bbd4..000000000000 --- a/scopes/html/html/interfaces.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type HtmlFunctionComposition = (element: HTMLElement) => void; - -export type HtmlComposition = HtmlFunctionComposition | string | Element | HTMLDocument; diff --git a/scopes/html/html/mount.ts b/scopes/html/html/mount.ts deleted file mode 100644 index 4b954041bc45..000000000000 --- a/scopes/html/html/mount.ts +++ /dev/null @@ -1,33 +0,0 @@ -// import { RenderingContext } from '@teambit/preview'; -// import { StandaloneNotFoundPage } from '@teambit/design.ui.pages.standalone-not-found-page'; -import { RenderHtmlComposition } from './render-composition'; -import { HtmlComposition } from './interfaces'; - -// TODO implement wrapping for providers with html env -// function wrap(Component: ComponentType, WrapperComponent?: ComponentType): ComponentType { -// function Wrapper({ children }: { children?: ReactNode }) { - -// return Wrapper; -// } - -/** - * HOC to wrap and mount all registered providers into the DOM. - * TODO implement for regular html providers/wrappers with wrap function above - */ -export function withProviders() { - return `
`; -} - -function ensureRootElementInBody() { - const root = document.createElement('div'); - root.id = 'root'; - document.body.appendChild(root); - return root; -} - -const getRoot = () => document.getElementById('root') || ensureRootElementInBody(); - -export default function mountHtmlComposition(composition: HtmlComposition) { - const root = getRoot(); - RenderHtmlComposition(root, composition); -} diff --git a/scopes/html/html/render-composition.ts b/scopes/html/html/render-composition.ts deleted file mode 100644 index 5ed1a0bb3e56..000000000000 --- a/scopes/html/html/render-composition.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { renderTemplate } from '@teambit/html.modules.render-template'; -import { HtmlComposition } from './interfaces'; - -/** - * this mounts compositions into the DOM in the component preview. - * this function can be overridden through ReactAspect.overrideCompositionsMounter() API - * to apply custom logic for component DOM mounting. - */ -export const RenderHtmlComposition = (target: HTMLElement | null, composition: HtmlComposition) => { - if (!target) return undefined; - - // first clear the root node from any previous compositions. Required as all compositions - // of a specific component are rendered in the same iframe - target.innerHTML = ''; - - if (composition instanceof Element || composition instanceof HTMLDocument) { - target.appendChild(composition); - return undefined; - } - - switch (typeof composition) { - case 'function': - composition(target); - return undefined; - case 'string': - renderTemplate(target, composition); - return undefined; - default: - return undefined; // TODO error "this type of composition is not supported by the html env" - } -}; diff --git a/workspace.jsonc b/workspace.jsonc index e60669649fb5..0a792c77f0ae 100644 --- a/workspace.jsonc +++ b/workspace.jsonc @@ -218,9 +218,7 @@ "@teambit/git.modules.git-ignore": "^1.0.2", "@teambit/graph.cleargraph": "0.0.11", "@teambit/harmony": "0.4.6", - "@teambit/html.generator.html-templates": "^1.0.12", "@teambit/html.modules.inject-html-element": "0.0.5", - "@teambit/html.modules.render-template": "0.0.104", "@teambit/lane-id": "~0.0.311", "@teambit/lanes.ui.compare.lane-compare": "^0.0.193", "@teambit/lanes.ui.compare.lane-compare-page": "^0.0.162", @@ -485,7 +483,6 @@ "lodash.head": "4.0.1", "lodash.partition": "4.6.0", "lru-cache": "6.0.0", - "map-obj": "4.2.1", "memoizee": "0.4.15", "mime": "2.5.2", "mini-css-extract-plugin": "2.2.2",