(feat): Adopting next/fonts for loading fonts from google in nextjs projects.

packages/teleport-component-generator-react/src/index.ts

@@ -55,10 +55,10 @@ const createReactComponentGenerator: ComponentGeneratorInstance = ({
   mappings.forEach((mapping) => generator.addMapping(mapping))
 
   generator.addPlugin(reactComponentPlugin)
-  generator.addPlugin(stylePlugin)
   generator.addPlugin(propTypesPlugin)
   plugins.forEach((plugin) => generator.addPlugin(plugin))
 
+  generator.addPlugin(stylePlugin)
   // Import plugin needs to be last to handle all dependencies
   // TODO: use a different function to set/interact with the import plugin
   generator.addPlugin(importStatementsPlugin)

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

@@ -49,7 +49,7 @@ describe('addClassStringOnJSXTag', () => {
   it('adds a class on an element with no classes', () => {
     const tag = createJSXTag('button')
 
-    addClassStringOnJSXTag(tag, 'primary')
+    addClassStringOnJSXTag(tag, ['primary'])
     expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
 
     const classAttr = tag.openingElement.attributes[0] as types.JSXAttribute
@@ -61,7 +61,7 @@ describe('addClassStringOnJSXTag', () => {
     const tag = createJSXTag('button')
     addAttributeToJSXTag(tag, 'className', 'button')
 
-    addClassStringOnJSXTag(tag, 'primary')
+    addClassStringOnJSXTag(tag, ['primary'])
     expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
 
     const classAttr = tag.openingElement.attributes[0] as types.JSXAttribute

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

@@ -7,16 +7,40 @@ import { UIDLStateDefinition, UIDLPropDefinition, UIDLRawValue } from '@teleport
  */
 export const addClassStringOnJSXTag = (
   jsxNode: types.JSXElement,
-  classString: string,
-  classAttributeName?: string,
-  dynamicValues: Array<types.MemberExpression | types.Identifier> = []
+  classString: string[] = [],
+  dynamicValues: Array<types.MemberExpression | types.Identifier> = [],
+  classAttributeName = 'className'
 ) => {
+  const hasExistingClassNames = jsxNode.openingElement.attributes.find(
+    (attr) => attr.type === 'JSXAttribute' && attr.name.name === classAttributeName
+  ) as types.JSXAttribute
+
+  if (hasExistingClassNames) {
+    const attrValue = hasExistingClassNames.value
+    jsxNode.openingElement.attributes = jsxNode.openingElement.attributes.filter(
+      (attr) => attr.type === 'JSXAttribute' && attr.name.name !== classAttributeName
+    )
+
+    if (attrValue.type === 'StringLiteral') {
+      classString.unshift(attrValue.value)
+    }
+
+    if (
+      attrValue.type === 'JSXExpressionContainer' &&
+      attrValue.expression.type === 'TemplateLiteral'
+    ) {
+      attrValue.expression.expressions.forEach((exp) => {
+        dynamicValues.push(exp as types.MemberExpression)
+      })
+    }
+  }
+
   const classAttribute = getClassAttribute(jsxNode, { createIfNotFound: true, classAttributeName })
 
   if (dynamicValues.length === 0) {
     if (classAttribute.value && classAttribute.value.type === 'StringLiteral') {
       const classArray = classAttribute.value.value.split(' ')
-      classArray.push(classString)
+      classArray.push(...classString)
       classAttribute.value.value = classArray.join(' ').trim()
     } else {
       throw new Error(

packages/teleport-plugin-css/__tests__/component-scoped.ts

@@ -90,7 +90,7 @@ describe('Component Scoped Styles', () => {
     expect(
       jsxComponent.meta.nodesLookup.container.openingElement.attributes[0].value.expression
         .quasis[0].value.raw
-    ).toBe('md-8 primary-navbar ')
+    ).toBe('md-8,primary-navbar ')
     expect(
       jsxComponent.meta.nodesLookup.container.openingElement.attributes[0].value.expression
         .expressions[0].property.name

packages/teleport-plugin-css/src/index.ts

@@ -289,15 +289,15 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
       } else {
         ASTUtils.addClassStringOnJSXTag(
           root as types.JSXElement,
-          Array.from(classNamesToAppend).join(' '),
-          classAttributeName,
+          Array.from(classNamesToAppend),
           Array.from(dynamicVariantsToAppend).map((variant) => {
             const dynamicAttrValueIdentifier: types.Identifier = dynamicVariantPrefix
               ? types.identifier(dynamicVariantPrefix)
               : types.identifier(propsPrefix)
 
             return types.memberExpression(dynamicAttrValueIdentifier, types.identifier(variant))
-          })
+          }),
+          classAttributeName
         )
       }
     })

packages/teleport-plugin-react-styled-jsx/__tests__/component-scoped.ts

@@ -91,7 +91,7 @@ describe('Component Scoped Styles', () => {
     const dynamicExpression = jsxExpression.attributes[0].value.expression.expressions[0]
 
     expect(jsxExpression.attributes[0].value.expression.quasis[0].value.raw).toContain(
-      'md-8 primary-navbar '
+      'md-8,primary-navbar '
     )
     expect(dynamicExpression.object.name).toBe('props')
     expect(dynamicExpression.property.name).toBe('variant')

packages/teleport-plugin-react-styled-jsx/src/index.ts

@@ -177,8 +177,7 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
 
       ASTUtils.addClassStringOnJSXTag(
         root as types.JSXElement,
-        Array.from(classNamesToAppend).join(' '),
-        'className',
+        Array.from(classNamesToAppend),
         Array.from(dynamicVariantsToAppend)
       )
     })

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

@@ -7,7 +7,6 @@ import { ReactStyleVariation, FileType } from '@teleporthq/teleport-types'
 import { createStyleSheetPlugin } from '@teleporthq/teleport-plugin-css'
 import importStatementsPlugin from '@teleporthq/teleport-plugin-import-statements'
 import nextImagePlugin from '@teleporthq/teleport-plugin-jsx-next-image'
-
 import { createDocumentFileChunks, configContentGenerator } from './utils'
 import { NextProjectMapping } from './next-project-mapping'
 import NextTemplate from './project-template'

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

@@ -11,6 +11,7 @@ export const NextProjectMapping: Mapping = {
       },
       attrs: {
         href: { type: 'dynamic', content: { referenceType: 'attr', id: 'transitionTo' } },
+        legacyBehavior: { type: 'static', content: true },
       },
       children: [
         {

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

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

packages/teleport-project-generator/__tests__/index.ts

@@ -116,6 +116,18 @@ describe('Generic Project Generator', () => {
             prefix: '/static',
           },
           designLanguage: undefined,
+          fonts: [
+            {
+              attrs: {
+                'data-type': {
+                  content: 'default-font',
+                  type: 'static',
+                },
+              },
+              path: 'https://fonts.googleapis.com/css?family=Roboto',
+              type: 'font',
+            },
+          ],
           projectRouteDefinition: uidl.root.stateDefinitions.route,
           mapping: {},
           skipValidation: true,
@@ -133,6 +145,18 @@ describe('Generic Project Generator', () => {
             prefix: '/static',
           },
           designLanguage: undefined,
+          fonts: [
+            {
+              attrs: {
+                'data-type': {
+                  content: 'default-font',
+                  type: 'static',
+                },
+              },
+              path: 'https://fonts.googleapis.com/css?family=Roboto',
+              type: 'font',
+            },
+          ],
           projectRouteDefinition: uidl.root.stateDefinitions.route,
           mapping: {},
           skipValidation: true,
@@ -184,6 +208,18 @@ describe('Generic Project Generator', () => {
             mappings: {},
             prefix: '/test/static',
           },
+          fonts: [
+            {
+              attrs: {
+                'data-type': {
+                  content: 'default-font',
+                  type: 'static',
+                },
+              },
+              path: 'https://fonts.googleapis.com/css?family=Roboto',
+              type: 'font',
+            },
+          ],
           designLanguage: undefined,
           projectRouteDefinition: uidl.root.stateDefinitions.route,
           mapping: {},

packages/teleport-project-generator/src/index.ts

@@ -15,6 +15,7 @@ import {
   GeneratorFactoryParams,
   HTMLComponentGenerator,
   ProjectGenerator as ProjectGeneratorType,
+  UIDLFontAsset,
 } from '@teleporthq/teleport-types'
 import {
   injectFilesToPath,
@@ -242,6 +243,7 @@ export class ProjectGenerator implements ProjectGeneratorType {
       mapping,
       skipValidation: true,
       designLanguage: uidl.root?.designLanguage,
+      fonts: uidl.globals.assets.filter((asset) => asset.type === 'font') as UIDLFontAsset[],
     }
 
     // Handling project style sheet
@@ -252,6 +254,7 @@ export class ProjectGenerator implements ProjectGeneratorType {
       const { files, dependencies } = await this.styleSheetGenerator.generateComponent(uidl.root, {
         isRootComponent: true,
         assets: options.assets,
+        fonts: options.fonts,
       })
       inMemoryFilesMap.set('projectStyleSheet', {
         path: this.strategy.projectStyleSheet.path,

packages/teleport-project-plugin-custom-files/__tests__/index.ts

@@ -80,7 +80,7 @@ export default Welcome`,
     const pagesFolder = subFolders.find((file) => file.name === 'pages')
     const customFolder = pagesFolder.subFolders.find((file) => file.name === 'custom-folder')
 
-    expect(files.length).toBe(3)
+    expect(files.length).toBe(4)
     expect(pagesFolder).toBeDefined()
     expect(customFolder).toBeDefined()
     expect(customFolder.files.length).toBe(1)

packages/teleport-project-plugin-next-fonts/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@teleporthq/teleport-project-plugin-next-fonts",
+  "version": "0.27.2",
+  "description": "A Next-JS plugin for using next/font for google fonts",
+  "author": "teleportHQ",
+  "license": "MIT",
+  "homepage": "https://teleporthq.io/",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/teleporthq/teleport-code-generators.git"
+  },
+  "bugs": {
+    "url": "https://github.com/teleporthq/teleport-code-generators/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.json --module commonjs --outDir dist/cjs"
+  },
+  "dependencies": {
+    "@babel/types": "^7.5.5",
+    "@teleporthq/teleport-shared": "^0.27.2",
+    "@teleporthq/teleport-types": "^0.27.0",
+    "@types/css": "^0.0.33",
+    "css": "^3.0.0"
+  }
+}