Skip to content

05-ssr-with-lisan-plugin-loader

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

05-ssr-with-lisan-plugin-loader

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
pages
pages
 
 
public
public
 
 
translations
translations
 
 
.gitignore
.gitignore
 
 
.lisanrc
.lisanrc
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

README.md

This is a Next.js project bootstrapped with create-next-app.

Hello World (Next.js + Lisan Loader Plugin)

A Small Tip:

Lisan Loader Plugin is meant for pure javascript projects.

When using a framework in your project like react, next.js or vue.js, we recommend you to take advantage of most recent EcmaScript features like dynamic import.

To learn more see Hello World (Next.js) example, where dynamic import was used.

Goal

Purpose of this example to demonstrate a minimal setup to use LisanJS with lisan-plugin-loader which is also compatible with server side rendering..

Instructions

1. Init project

npm init next-app 04-nextjs-ssr

cd ./04-nextjs-ssr

touch .lisanrc

First run the application to see if everything works fine:

npm run dev

If everything works fine, continue as below.

1.1. Install Lisan:

npm install lisan lisan-plugin-loader
npm install lisan-cli --save-dev

1.2. Add scripts to package.json:

{
  // ...
  "scripts": {
    "lisan:compile": "lisan compile"
    // ..rest of the scripts
  }
}

1.3. Add dictionaries to .gitignore (Optional)

node_modules/

public/dictionaries/

2. Set Lisan config

Update the .lisanrc config as below:

{
  "compile": {
    "inputDir": "translations",
    "outputDir": "public/dictionaries",
    "returnArray": true
  }
}

returnArray option makes dictionaries compatible with JSX. Learn more at JSX Interpolation

3. Create translation files

mkdir -p translations/en/ && touch translations/en/main.json
mkdir -p translations/tr/ && touch translations/tr/main.json

Migrate content from ./pages/index.js to ./translations/en/main.json.

{
  "locale": "en",
  "entries": {
    "text.loading": "Loading...",
    "document.title": "Create Lisan App",
    "page.title": "Welcome to ${linkElement}",
    "page.description": " Get started by editing ${codeElement}",
    "section.documentation.title": "Documentation",
    "section.documentation.desc": "Find out more about technical details and best practices.",
    "section.translations.title": "Lisan Literal",
    "section.translations.desc": "See full capabilities of Lisan Literal",
    "section.examples.title": "Examples",
    "section.examples.desc": "Explore many different use cases of Lisan.",
    "section.try_compiler.title": "Try Online Compiler",
    "section.try_compiler.desc": "You can test capabilities of lisan-compiler online.",
    "powered.by": "Powered by ${logoImgElement}"
  }
}

4. Update the ./pages/index.js

You can see ./pages/index.js from here.

5. Run the app

To run lisan compiler in watch mode you can use -w flag.

npm run lisan:compile -- -w
npm run dev