Thymeleaf로 JavaScript 생성

개요

어쨌든 Thymeleaf에서 JavaScript를 만지는 것이 있었으므로 비망록입니다.

환경

OpenJDK 11.0.2
SpringBoot 2.3.4
Thymeleaf 3.0.11

TemplateEngine 설정

AppConfig.java

@Configuration
public class AppConfig {

    @Bean
    public TemplateEngine scriptTemplateEngine() {
        final TemplateEngine templateEngine = new TemplateEngine();
        templateEngine.setDialect(new SpringStandardDialect());
        templateEngine.setTemplateResolver(scriptTemplateResolver());

        return templateEngine;
    }

    private ITemplateResolver scriptTemplateResolver() {

        final ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
        templateResolver.setPrefix("/templates/scripts/");
        templateResolver.setSuffix(".js");
        templateResolver.setTemplateMode(TemplateMode.JAVASCRIPT);
        templateResolver.setCharacterEncoding("utf-8");
        templateResolver.setCacheable(false);
        templateResolver.setCheckExistence(true);

        return templateResolver;
    }
}

템플릿 파일 만들기

resources/templates/scripts/sample.js

'use strict';

(() => {

    const rawData = [# th:text="${rawData}" /];
    const jsonData = [# th:text="${jsonData}" /]; 

    console.log(rawData);
    console.log(jsonData);

})();

두 변수를 전달하는 형태로 만듭니다.

컨트롤러 설정

SampleController.java

@Controller
@RequiredArgsConstructor
public class SampleController {

    private final TemplateEngine scriptTemplateEngine;
    private final ObjectMapper objectMapper;

    @GetMapping(value = "/app.js", produces = "text/javascript")
    @ResponseBody
    public String sample() throws JsonProcessingException {

        String path = "sample";

        Map<String, Object> map = new HashMap<>();
        map.put("id", 1);
        map.put("name", "Takeshi");
        List<Map<String, Object>> list = new ArrayList<>();
        list.add(map);

        Context ctx = new Context();
        ctx.setVariable("rawData", list);
        ctx.setVariable("jsonData", objectMapper.writeValueAsString(list));

        return scriptTemplateEngine.process(path, ctx);
    }
}

sample() 쪽으로 데이터를 작성해, 방금전의 변수명과 같은 이름으로 각각 데이터 그 자체와 JSON 캐릭터 라인으로 변환한 데이터를 process 메소드에 건네주고 반환합니다.
주의하고 싶은 것이 thymeleaf-spring5 종속성을 추가하면 자동으로 View를 반환하는 빈이 templateEngine이라는 이름으로 작성됩니다.
설정 파일에서 작성한 Bean을 사용하는 경우에는 그 때 사용한 Bean 이름으로 DI해야 합니다.

결과

앱을 시작하고/app.js에 액세스해 봅니다.


안전하게 만들 수있었습니다.
동적으로 JS 작성할 기회는 그렇게 없다고는 생각합니다만 참고까지.

Thymeleaf의 업데이트는 2년 정도 없는 것 같네요.
개발 멈췄습니까?