(fix): Add lottie player only when used in next projects

examples/uidl-samples/project.json

@@ -816,6 +816,26 @@
                                                     }
                                                 },
                                                 "children": [
+                                                    {
+                                                        "type": "element",
+                                                        "content": {
+                                                            "elementType": "lottie-node",
+                                                            "style": {
+                                                                "width": "200px",
+                                                                "height": "200px"
+                                                            },
+                                                            "attrs": {
+                                                                "src": {
+                                                                    "type": "static",
+                                                                    "content": "https://assets9.lottiefiles.com/datafiles/gUENLc1262ccKIO/data.json"
+                                                                },
+                                                                "autoplay": {
+                                                                    "type": "static",
+                                                                    "content": "true"
+                                                                }
+                                                            }
+                                                        }
+                                                    },
                                                     {
                                                         "type": "element",
                                                         "content": {

packages/teleport-plugin-common/src/node-handlers/node-to-jsx/index.ts

@@ -24,6 +24,7 @@ import {
   addAttributeToJSXTag,
   addDynamicAttributeToJSXTag,
   addRawAttributeToJSXTag,
+  generateDynamicWindowImport,
 } from '../../utils/ast-utils'
 import { createJSXTag, createSelfClosingJSXTag } from '../../builders/ast-builders'
 import { DEFAULT_JSX_OPTIONS } from './constants'
@@ -62,6 +63,11 @@ const generateElementNode: NodeToJSX<UIDLElementNode, types.JSXElement> = (
         dependencies[tagName] = { ...dependency }
       }
     }
+
+    if (dependency?.meta && `needsWindowObject` in dependency.meta) {
+      const dynamicWindowImport = generateDynamicWindowImport('useEffect', dependency.path)
+      params.windowImports[dependency.path] = dynamicWindowImport
+    }
   }
 
   const elementName =

packages/teleport-plugin-common/src/node-handlers/node-to-jsx/types.ts

@@ -7,6 +7,7 @@ export interface JSXGenerationParams {
   stateDefinitions: Record<string, UIDLStateDefinition>
   nodesLookup: Record<string, types.JSXElement>
   dependencies: Record<string, UIDLDependency>
+  windowImports: Record<string, types.ExpressionStatement>
 }
 
 export interface JSXGenerationOptions {

packages/teleport-plugin-common/src/utils/ast-utils.ts

@@ -409,9 +409,14 @@ export const createPureComponent = (
   name: string,
   stateDefinitions: Record<string, UIDLStateDefinition>,
   jsxTagTree: types.JSXElement,
+  windowImports: Record<string, types.ExpressionStatement> = {},
   t = types
 ): types.VariableDeclaration => {
-  const arrowFunctionBody = createReturnExpressionSyntax(stateDefinitions, jsxTagTree)
+  const arrowFunctionBody = createReturnExpressionSyntax(
+    stateDefinitions,
+    jsxTagTree,
+    windowImports
+  )
   const arrowFunction = t.arrowFunctionExpression([t.identifier('props')], arrowFunctionBody)
 
   const declarator = t.variableDeclarator(t.identifier(name), arrowFunction)
@@ -423,6 +428,7 @@ export const createPureComponent = (
 export const createReturnExpressionSyntax = (
   stateDefinitions: Record<string, UIDLStateDefinition>,
   jsxTagTree: types.JSXElement,
+  windowImports: Record<string, types.ExpressionStatement> = {},
   t = types
 ) => {
   const returnStatement = t.returnStatement(jsxTagTree)
@@ -431,7 +437,7 @@ export const createReturnExpressionSyntax = (
     createStateHookAST(stateKey, stateDefinitions[stateKey])
   )
 
-  return t.blockStatement([...stateHooks, returnStatement] || [])
+  return t.blockStatement([...stateHooks, ...Object.values(windowImports), returnStatement] || [])
 }
 
 /**
@@ -458,5 +464,20 @@ export const createStateHookAST = (
   ])
 }
 
+export const generateDynamicWindowImport = (
+  hookName = 'useEffect',
+  dependency: string
+): types.ExpressionStatement => {
+  return types.expressionStatement(
+    types.callExpression(types.identifier(hookName), [
+      types.arrowFunctionExpression(
+        [],
+        types.callExpression(types.identifier('import'), [types.stringLiteral(dependency)])
+      ),
+      types.arrayExpression([]),
+    ])
+  )
+}
+
 export const wrapObjectPropertiesWithExpression = (properties: types.ObjectProperty[]) =>
   types.objectExpression(properties)

packages/teleport-plugin-import-statements/src/index.ts

@@ -40,7 +40,11 @@ export const createImportPlugin: ComponentPluginFactory<ImportPluginConfig> = (
       if (Object.keys(importDefinitions).length > 0) {
         Object.keys(importDefinitions).forEach((dependencyRef) => {
           const dependency = importDefinitions[dependencyRef]
-          if (dependency.meta?.useAsReference || dependency.meta?.importJustPath) {
+          if (
+            dependency.meta?.useAsReference ||
+            dependency.meta?.importJustPath ||
+            dependency?.meta.needsWindowObject
+          ) {
             return
           }
           dependencies[dependencyRef] = {
@@ -85,6 +89,10 @@ const groupDependenciesByPackage = (
         return
       }
 
+      if (dep?.meta && 'needsWindowObject' in dep.meta) {
+        return
+      }
+
       if (dep?.meta?.importAlias) {
         result[dep.meta.importAlias] = []
       }

packages/teleport-plugin-react-base-component/src/index.ts

@@ -13,6 +13,7 @@ import {
   ChunkType,
   FileType,
 } from '@teleporthq/teleport-types'
+import * as types from '@babel/types'
 
 import {
   DEFAULT_COMPONENT_CHUNK_NAME,
@@ -49,11 +50,13 @@ export const createReactComponentPlugin: ComponentPluginFactory<ReactPluginConfi
     // This will help us inject style or classes at a later stage in the pipeline, upon traversing the UIDL
     // The structure will be populated as the AST is being created
     const nodesLookup = {}
+    const windowImports: Record<string, types.ExpressionStatement> = {}
     const jsxParams = {
       propDefinitions,
       stateDefinitions,
       nodesLookup,
       dependencies,
+      windowImports,
     }
 
     const jsxOptions: JSXGenerationOptions = {
@@ -74,9 +77,14 @@ export const createReactComponentPlugin: ComponentPluginFactory<ReactPluginConfi
     const pureComponent = ASTUtils.createPureComponent(
       componentName,
       stateDefinitions,
-      jsxTagStructure
+      jsxTagStructure,
+      windowImports
     )
 
+    if (Object.keys(windowImports).length) {
+      dependencies.useEffect = USE_STATE_DEPENDENCY
+    }
+
     structure.chunks.push({
       type: ChunkType.AST,
       fileType: FileType.JS,

packages/teleport-project-generator-next/src/next-project-mapping.ts

@@ -36,6 +36,15 @@ export const NextProjectMapping: Mapping = {
     },
     'lottie-node': {
       elementType: 'lottie-player',
+      dependency: {
+        type: 'package',
+        version: '1.6.0',
+        path: '@lottiefiles/lottie-player',
+        meta: {
+          importJustPath: true,
+          needsWindowObject: true,
+        },
+      },
     },
   },
 }

packages/teleport-project-generator-next/src/project-template.ts

@@ -20,8 +20,7 @@ export default {
   "dependencies": {
     "next": "^12.1.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "@lottiefiles/lottie-player": "1.6.0"
+    "react-dom": "^17.0.2"
   }
 }`,
       fileType: 'json',

packages/teleport-project-generator-next/src/utils.ts

@@ -140,16 +140,6 @@ export const configContentGenerator = (options: FrameWorkConfigOptions, t = type
           ]),
         ],
         t.blockStatement([
-          t.expressionStatement(
-            t.callExpression(t.memberExpression(t.identifier('React'), t.identifier('useEffect')), [
-              t.arrowFunctionExpression(
-                [],
-                t.callExpression(t.identifier('import'), [
-                  t.stringLiteral('@lottiefiles/lottie-player'),
-                ])
-              ),
-            ])
-          ),
           t.returnStatement(
             t.jsxElement(
               t.jsxOpeningElement(

packages/teleport-types/src/uidl.ts

@@ -362,6 +362,7 @@ export interface UIDLExternalDependency {
     importJustPath?: boolean
     useAsReference?: boolean
     importAlias?: string
+    needsWindowObject?: boolean
   }
 }
 

packages/teleport-uidl-validator/src/decoders/utils.ts

@@ -310,6 +310,7 @@ export const externaldependencyDecoder: Decoder<UIDLExternalDependency> = object
       originalName: optional(string()),
       importJustPath: optional(boolean()),
       useAsReference: optional(boolean()),
+      needsWindowObject: optional(boolean()),
     })
   ),
 })